@megha-ui/react 1.2.674 → 1.2.675

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.
@@ -15,6 +15,7 @@ interface EditorProps {
15
15
  textColor?: boolean;
16
16
  linkOptions?: boolean;
17
17
  };
18
+ toolbarToggle: any;
18
19
  }
19
20
  declare const TextEditor: React.FC<EditorProps>;
20
21
  export default TextEditor;
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
2
2
  import { useRef, useEffect, useState } from "react";
3
3
  import { FaBold, FaItalic, FaUnderline, FaStrikethrough, FaImage, FaLink, FaUnlink, FaAlignLeft, FaAlignCenter, FaAlignRight, } from "react-icons/fa";
4
4
  import { MdFormatListBulleted, MdFormatListNumbered } from "react-icons/md";
5
+ import { SiStyledcomponents } from "react-icons/si";
5
6
  const TextEditor = ({ value, onChange, enabledTools = {
6
7
  bold: true,
7
8
  italic: true,
@@ -14,7 +15,7 @@ const TextEditor = ({ value, onChange, enabledTools = {
14
15
  textAlign: true,
15
16
  textColor: true,
16
17
  linkOptions: true,
17
- }, }) => {
18
+ }, toolbarToggle, }) => {
18
19
  const editorRef = useRef(null);
19
20
  const selectionRef = useRef(null);
20
21
  const [showImageDropdown, setShowImageDropdown] = useState(false);
@@ -30,6 +31,7 @@ const TextEditor = ({ value, onChange, enabledTools = {
30
31
  const IconAlignRight = FaAlignRight;
31
32
  const IconFormatListBulleted = MdFormatListBulleted;
32
33
  const IconFormatListNumbered = MdFormatListNumbered;
34
+ const [collapsed, setCollapsed] = useState(true);
33
35
  const wrapSelection = (tag) => {
34
36
  const selection = document.getSelection();
35
37
  if (!selection || selection.rangeCount === 0)
@@ -208,7 +210,12 @@ const TextEditor = ({ value, onChange, enabledTools = {
208
210
  borderRadius: "0.25rem",
209
211
  padding: "0.65rem",
210
212
  position: "relative",
211
- }, children: [_jsxs("div", { style: {
213
+ }, children: [_jsx("div", { style: { position: "absolute", top: "-0.5rem", right: 0 }, children: _jsx("div", { className: "flex-grow-0 flex-shrink-0 flex items-center justify-center mr-2", onClick: () => setCollapsed((previous) => !previous), style: {
214
+ background: "rgb(222, 222, 222)",
215
+ borderRadius: "0.25rem",
216
+ cursor: "pointer",
217
+ padding: "0.25rem",
218
+ }, children: toolbarToggle !== null && toolbarToggle !== void 0 ? toolbarToggle : _jsx(SiStyledcomponents, {}) }) }), !collapsed && (_jsxs("div", { style: {
212
219
  display: "flex",
213
220
  gap: "0.65rem",
214
221
  marginBottom: "0.65rem",
@@ -220,7 +227,7 @@ const TextEditor = ({ value, onChange, enabledTools = {
220
227
  if (url)
221
228
  insertImage(url);
222
229
  setShowImageDropdown(false);
223
- }, style: dropdownItemStyle, children: "Insert from URL" }), _jsxs("label", { style: Object.assign(Object.assign({}, dropdownItemStyle), { cursor: "pointer" }), children: ["Upload from Computer", _jsx("input", { type: "file", accept: "image/*", onChange: handleImageUpload, style: { display: "none" } })] })] }))] })), enabledTools.linkOptions && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: insertLink, style: buttonStyle, children: _jsx(IconLink, {}) }), _jsx("button", { type: "button", onClick: removeLink, style: buttonStyle, children: _jsx(IconUnlink, {}) })] }))] }), _jsx("div", { ref: editorRef, contentEditable: true, onInput: updateContent, onClick: handleEditorClick, suppressContentEditableWarning: true, style: {
230
+ }, style: dropdownItemStyle, children: "Insert from URL" }), _jsxs("label", { style: Object.assign(Object.assign({}, dropdownItemStyle), { cursor: "pointer" }), children: ["Upload from Computer", _jsx("input", { type: "file", accept: "image/*", onChange: handleImageUpload, style: { display: "none" } })] })] }))] })), enabledTools.linkOptions && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: insertLink, style: buttonStyle, children: _jsx(IconLink, {}) }), _jsx("button", { type: "button", onClick: removeLink, style: buttonStyle, children: _jsx(IconUnlink, {}) })] }))] })), _jsx("div", { ref: editorRef, contentEditable: true, onInput: updateContent, onClick: handleEditorClick, suppressContentEditableWarning: true, style: {
224
231
  height: "max-content",
225
232
  padding: "0.65rem",
226
233
  border: "1px solid var(--divider-strong, #ddd)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megha-ui/react",
3
- "version": "1.2.674",
3
+ "version": "1.2.675",
4
4
  "description": "A collection of reusable UI components for React applications, built with TypeScript.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",