Skip to content

Commit

Permalink
Merge pull request #27 from mindfiredigital/bugfix/heading-on-selecte…
Browse files Browse the repository at this point in the history 
…d-text

fix: heading issue and tooltip overlap issue fix
  • Loading branch information
@deepakyadav-01
deepakyadav-01 authored Sep 6, 2024
2 parents 35c00a4 + 9cb0091 commit 0c58310
Show file tree
Hide file tree
Showing 6 changed files with 300 additions and 167 deletions.
186 changes: 149 additions & 37 deletions component/src/components/TextIgniter/Toolbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ const Toolbar = ({ features }) => {
const [isImageDialogOpen, setImageDialogOpen] = useState(false);
const [isUrlDialogOpen, setUrlDialogOpen] = useState(false);


const handleImageSubmit = ({ file, fileUrl }) => {
addImageOrVideo(file, fileUrl);
};
Expand All @@ -34,41 +33,128 @@ const Toolbar = ({ features }) => {
applyHeading(heading);
};


const handleTableOperation = (operation) => {
switch (operation) {
case "insert": insertTable(2, 2); break;
case "addRow": addTableRow(); break;
case "addColumn": addTableColumn(); break;
default: break;
case "insert":
insertTable(2, 2);
break;
case "addRow":
addTableRow();
break;
case "addColumn":
addTableColumn();
break;
default:
break;
}
};

const handleLayoutOperation = (layout) => {
switch (layout) {
case "single": insertLayout([100]); break;
case "two-equal": insertLayout([50, 50]); break;
case "three-equal": insertLayout([33.33, 33.33, 33.33]); break;
case "40-60": insertLayout([40, 60]); break;
case "60-40": insertLayout([60, 40]); break;
default: break;
case "single":
insertLayout([100]);
break;
case "two-equal":
insertLayout([50, 50]);
break;
case "three-equal":
insertLayout([33.33, 33.33, 33.33]);
break;
case "40-60":
insertLayout([40, 60]);
break;
case "60-40":
insertLayout([60, 40]);
break;
default:
break;
}
};

const getIsActive = (style) => activeStyles.includes(style);

const featureButtons = {
bold: <IconButton onClick={() => formatText("bold")} toolTip="Bold" isActive={getIsActive('bold')}><Icons.BoldIcon /></IconButton>,
italic: <IconButton onClick={() => formatText("italic")} toolTip="Italic" isActive={getIsActive('italic')}><Icons.ItalicIcon /></IconButton>,
underline: <IconButton onClick={() => formatText("underline")} toolTip="Underline" isActive={getIsActive('underline')}><Icons.UnderlineIcon /></IconButton>,
orderedList: <IconButton onClick={() => formatText("insertOrderedList")} toolTip="Ordered List" isActive={getIsActive('orderedList')}><Icons.OrderedListIcon /></IconButton>,
unorderedList: <IconButton onClick={() => formatText("insertUnorderedList")} toolTip="Unordered List" isActive={getIsActive('unorderedList')}><Icons.UnOrderedListIcon /></IconButton>,
justifyLeft: <IconButton onClick={() => formatText("justifyLeft")} toolTip="Justify Left" isActive={getIsActive('justifyLeft')}><Icons.AlignLeftIcon /></IconButton>,
justifyCenter: <IconButton onClick={() => formatText("justifyCenter")} toolTip="Justify Center" isActive={getIsActive('justifyCenter')}><Icons.AlignCenterIcon /></IconButton>,
justifyRight: <IconButton onClick={() => formatText("justifyRight")} toolTip="Justify Right" isActive={getIsActive('justifyRight')}><Icons.AlignRightIcon /></IconButton>,
bold: (
<IconButton
onClick={() => formatText("bold")}
toolTip="Bold"
isActive={getIsActive("bold")}
>
<Icons.BoldIcon />
</IconButton>
),
italic: (
<IconButton
onClick={() => formatText("italic")}
toolTip="Italic"
isActive={getIsActive("italic")}
>
<Icons.ItalicIcon />
</IconButton>
),
underline: (
<IconButton
onClick={() => formatText("underline")}
toolTip="Underline"
isActive={getIsActive("underline")}
>
<Icons.UnderlineIcon />
</IconButton>
),
orderedList: (
<IconButton
onClick={() => formatText("insertOrderedList")}
toolTip="Ordered List"
isActive={getIsActive("orderedList")}
>
<Icons.OrderedListIcon />
</IconButton>
),
unorderedList: (
<IconButton
onClick={() => formatText("insertUnorderedList")}
toolTip="Unordered List"
isActive={getIsActive("unorderedList")}
>
<Icons.UnOrderedListIcon />
</IconButton>
),
justifyLeft: (
<IconButton
onClick={() => formatText("justifyLeft")}
toolTip="Justify Left"
isActive={getIsActive("justifyLeft")}
>
<Icons.AlignLeftIcon />
</IconButton>
),
justifyCenter: (
<IconButton
onClick={() => formatText("justifyCenter")}
toolTip="Justify Center"
isActive={getIsActive("justifyCenter")}
>
<Icons.AlignCenterIcon />
</IconButton>
),
justifyRight: (
<IconButton
onClick={() => formatText("justifyRight")}
toolTip="Justify Right"
isActive={getIsActive("justifyRight")}
>
<Icons.AlignRightIcon />
</IconButton>
),
createLink: (
<>
<IconButton onClick={() => setUrlDialogOpen(true)} toolTip="Create Link" isActive={getIsActive('createLink')}><Icons.LinkIcon /></IconButton>
<IconButton
onClick={() => setUrlDialogOpen(true)}
toolTip="Create Link"
isActive={getIsActive("createLink")}
>
<Icons.LinkIcon />
</IconButton>
<FileUrlDialog
isOpen={isUrlDialogOpen}
onClose={() => setUrlDialogOpen(false)}
Expand All @@ -81,7 +167,13 @@ const Toolbar = ({ features }) => {
),
insertImage: (
<>
<IconButton onClick={() => setImageDialogOpen(true)} toolTip="Insert Image/Video" isActive={getIsActive('insertImage')}><Icons.ImageIcon /></IconButton>
<IconButton
onClick={() => setImageDialogOpen(true)}
toolTip="Insert Image/Video"
isActive={getIsActive("insertImage")}
>
<Icons.ImageIcon />
</IconButton>
<ImageUploadSelectionDialog
isOpen={isImageDialogOpen}
onClose={() => setImageDialogOpen(false)}
Expand All @@ -90,8 +182,24 @@ const Toolbar = ({ features }) => {
/>
</>
),
superscript: <IconButton onClick={() => formatText("superscript")} toolTip="Superscript" isActive={getIsActive('superscript')}><Icons.SuperScriptIcon /></IconButton>,
subscript: <IconButton onClick={() => formatText("subscript")} toolTip="Subscript" isActive={getIsActive('subscript')}><Icons.SubScriptIcon /></IconButton>,
superscript: (
<IconButton
onClick={() => formatText("superscript")}
toolTip="Superscript"
isActive={getIsActive("superscript")}
>
<Icons.SuperScriptIcon />
</IconButton>
),
subscript: (
<IconButton
onClick={() => formatText("subscript")}
toolTip="Subscript"
isActive={getIsActive("subscript")}
>
<Icons.SubScriptIcon />
</IconButton>
),
table: (
<IconDropDown
id="tableDropdown"
Expand All @@ -112,24 +220,24 @@ const Toolbar = ({ features }) => {
toolTip={"Layout"}
items={[
{ value: "single", label: "Single Column" },
{ value: "two-equal", label: "Two Equal Columns"},
{ value: "two-equal", label: "Two Equal Columns" },
{ value: "three-equal", label: "Three Equal Columns" },
{ value: "40-60", label: "40-60"},
{ value: "40-60", label: "40-60" },
{ value: "60-40", label: "60-40" },
]}
onChange={handleLayoutOperation}
/>
),
heading: (
<IconDropDown
icon={<Icons.HeadingIcon />}
items={[
{ value: "h1", label: "Heading 1", },
{ value: "h2" , label: "Heading 2"},
{ value: "h3", label: "Heading 3" },
{ value: "h4" ,label: "Heading 4"},
{ value: "h5" , label: "Heading 5"},
{value: "h6", label: "Heading 6" },
icon={<Icons.HeadingIcon />}
items={[
{ value: "h1", label: "Heading 1" },
{ value: "h2", label: "Heading 2" },
{ value: "h3", label: "Heading 3" },
{ value: "h4", label: "Heading 4" },
{ value: "h5", label: "Heading 5" },
{ value: "h6", label: "Heading 6" },
]}
onChange={handleHeadingChange}
toolTip={"Headings"}
Expand All @@ -141,16 +249,20 @@ const Toolbar = ({ features }) => {
<div className="toolbar">
<div className="toolbar-switch">
<label>
<input type="checkbox" checked={isToolbarVisible} onChange={toggleToolbarVisibility} />
<input
type="checkbox"
checked={isToolbarVisible}
onChange={toggleToolbarVisibility}
/>
{!isToolbarVisible ? "Preview Mode" : "Edit Mode"}
</label>
</div>
{ !isToolbarVisible &&
{!isToolbarVisible &&
features.map((feature, index) => (
<React.Fragment key={index}>{featureButtons[feature]}</React.Fragment>
))}
</div>
);
};

export default Toolbar;
export default Toolbar;
21 changes: 10 additions & 11 deletions component/src/components/ui/Dropdown.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,34 @@ import React, { useState } from "react";
import "../../styles/ui-component.css";
import Tooltip from "./ToolTip";

const IconDropDown = ({ items, onChange, icon, id, openRight,toolTip }) => {
const IconDropDown = ({ items, onChange, icon, id, openRight, toolTip }) => {
const [isOpen, setIsOpen] = useState(false);

const handleButtonClick = () => {
const handleButtonClick = (e) => {
e.preventDefault();
setIsOpen(!isOpen);
};

const handleItemClick = (value) => {
const handleItemClick = (value, e) => {
e.preventDefault();
onChange(value);
// Close the dropdown after item selection.
setIsOpen(false);
};

return (

<div className={`icon-dropdown ${openRight ? "open-right" : ""}`}>
<Tooltip text={toolTip}>
<button className="dropbtn" id={id} onClick={handleButtonClick}>
{/* Render the consistent icon on the button */}
{icon}
</button>
<Tooltip text={toolTip}>
<button className="dropbtn" id={id} onMouseDown={handleButtonClick}>
{icon}
</button>
</Tooltip>
{isOpen && (
<div className="icon-dropdown-content">
{items.map((item, index) => (
<div
key={index}
className="dropdown-item"
onClick={() => handleItemClick(item.value)}
onMouseDown={(e) => handleItemClick(item.value, e)}
>
{item.icon && <span className="dropdown-icon">{item.icon}</span>}
{item.label}
Expand Down
3 changes: 1 addition & 2 deletions component/src/components/ui/ToolTip.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import React from "react";
import "../../styles/ui-component.css";

const Tooltip = ({ text, children }) => {

return text ? (
<div className="tooltip-container">
{children}
<div className="tooltip">{text}</div>
{children}
</div>
) : (
<></>
Expand Down
Loading

0 comments on commit 0c58310

Please sign in to comment.