Fixed styling issues and svg build

app/src/App.css

@@ -6,3 +6,7 @@
   margin: 25px;
   width: 1000px;
 }
+
+.richtextcontainer {
+  border: 1px solid black;
+}

app/src/App.tsx

@@ -10,12 +10,14 @@ function App() {
   return (
     <div className="main">
       <h1>RichTextEditor</h1>
-      <RichTextEditor
-        content={content}
-        setContent={setContent}
-        readOnly={readOnly}
-        textOnlyReadOnly={textOnlyReadOnly}
-      />
+      <div className="richtextcontainer">
+        <RichTextEditor
+          content={content}
+          setContent={setContent}
+          readOnly={readOnly}
+          textOnlyReadOnly={textOnlyReadOnly}
+        />
+      </div>
       <br />
       <p>{content}</p>
       <button onClick={() => setReadOnly(!readOnly)}>Toggle ReadOnly</button>

app/src/index.css

@@ -16,4 +16,3 @@ h1 {
   font-size: 3.2em;
   line-height: 1.1;
 }
-

package.json

@@ -13,15 +13,13 @@
     "'build:dts' is part of 'build' and it bundles the typescipt declarations into a single bundle.d.ts file.",
     "'clean:prebuild' is part of build and it removes directories and files before the build.",
     "'clean:postbuild' is part of build and it removes directories and files after the build.",
-    "'clean:predts' is part of build:dts and it removes bad imports from *.d.ts files.",
     "'pack' is used to package the code before a release."
   ],
   "scripts": {
     "build": "npm run clean:prebuild && rollup -c rollup.config.js && npm run build:dts && npm run clean:postbuild",
-    "build:dts": "npm run clean:predts && rollup -c rollupdts.config.js && node scripts/remove-dts-files",
+    "build:dts": "node scripts/remove-css-imports && rollup -c rollupdts.config.js && node scripts/remove-dts-files",
     "clean:prebuild": "rm -rf .rollup.cache build tsconfig.tsbuildinfo",
     "clean:postbuild": "node scripts/remove-empty-dirs && rm -rf .rollup.cache tsconfig.tsbuildinfo",
-    "clean:predts": "node scripts/remove-css-imports && node scripts/remove-svg-import-export",
     "pack": "npm i && npm run build && npm cache clean --force && npm pack && mkdir releases && mv *.tgz ./releases/"
   },
   "dependencies": {
@@ -35,7 +33,6 @@
     "@types/react": "18.2.21",
     "rollup-plugin-dts": "6.0.2",
     "rollup-plugin-postcss": "4.0.2",
-    "rollup-plugin-svg-import": "3.0.0",
     "tslib": "2.6.2",
     "typescript": "5.2.2"
   },

rollup.config.js

@@ -2,7 +2,6 @@ import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import typescript from "@rollup/plugin-typescript";
 import postcss from "rollup-plugin-postcss";
-import svg from "rollup-plugin-svg-import";
 
 export default [
   {
@@ -19,7 +18,6 @@ export default [
       resolve(),
       commonjs(),
       postcss({ extensions: [".css"] }),
-      svg(),
       typescript({ tsconfig: "./tsconfig.json", outputToFilesystem: true }),
     ],
   },

src/Toolbar/Toolbar.tsx

@@ -3,13 +3,9 @@ import { ToolbarProps } from "../types";
 import { FontSizeButton } from "./components/FontSizeButton";
 import {
   HighlighterIcon,
-  HighlighterIconDisabled,
   ListIcon,
-  ListIconDisabled,
   NumberedListIcon,
-  NumberedListIconDisabled,
   UndoIcon,
-  UndoIconDisabled,
 } from "../assets";
 import { InsertLinkButton } from "./components/InsertLinkButton";
 import {
@@ -125,11 +121,7 @@ export const Toolbar = (props: ToolbarProps) => {
         }
       >
         <Tooltip content="Highlight">
-          <img
-            src={!readOnly ? HighlighterIcon : HighlighterIconDisabled}
-            alt="Highlighter Icon"
-            className="rt-icon"
-          />
+          <HighlighterIcon disabled={readOnly} />
         </Tooltip>
       </button>
       {/* BULLET LIST */}
@@ -151,11 +143,7 @@ export const Toolbar = (props: ToolbarProps) => {
         }
       >
         <Tooltip content="Bulleted List">
-          <img
-            src={!readOnly ? ListIcon : ListIconDisabled}
-            alt="List Icon"
-            className="rt-icon"
-          />
+          <ListIcon disabled={readOnly} />
         </Tooltip>
       </button>
       {/* NUMBERED LIST */}
@@ -177,11 +165,7 @@ export const Toolbar = (props: ToolbarProps) => {
         }
       >
         <Tooltip content="Numbered List">
-          <img
-            src={!readOnly ? NumberedListIcon : NumberedListIconDisabled}
-            alt="Numbered List Icon"
-            className="rt-icon"
-          />
+          <NumberedListIcon disabled={readOnly} />
         </Tooltip>
       </button>
       {/* INSERT LINK */}
@@ -204,11 +188,7 @@ export const Toolbar = (props: ToolbarProps) => {
         }
       >
         <Tooltip content="Undo">
-          <img
-            src={!readOnly ? UndoIcon : UndoIconDisabled}
-            alt="Undo Icon"
-            className="rt-icon"
-          />
+          <UndoIcon disabled={readOnly} />
         </Tooltip>
       </button>
     </div>

src/Toolbar/components/FontSizeButton.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { FontSizeButtonProps } from "../../types";
 import { removeHeadersFromSelection, toggleHeaderStyle } from "../../utils";
-import { FontSizeIcon, FontSizeIconDisabled, TextIcon } from "../../assets";
+import { FontSizeIcon, TextIcon } from "../../assets";
 import { Tooltip } from "./Tooltip";
 
 export const FontSizeButton = (props: FontSizeButtonProps) => {
@@ -25,11 +25,7 @@ export const FontSizeButton = (props: FontSizeButtonProps) => {
         onClick={() => setShowPopover(!showPopover)}
       >
         <Tooltip content="Font Size">
-          <img
-            src={!readOnly ? FontSizeIcon : FontSizeIconDisabled}
-            alt="Font Size Icon"
-            className="rt-icon"
-          />
+          <FontSizeIcon disabled={readOnly} />
         </Tooltip>
       </button>
       {/* Popover */}
@@ -93,7 +89,7 @@ export const FontSizeButton = (props: FontSizeButtonProps) => {
             }}
           >
             <Tooltip content="Reset">
-              <img className="rt-icon" src={TextIcon} alt="Text Icon" />
+              <TextIcon />
             </Tooltip>
           </button>
         </div>

src/Toolbar/components/InsertLinkButton.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 import { InsertLinkButtonProps, SelectionContext } from "../../types";
-import { InsertIcon, LinkIcon, LinkIconDisabled } from "../../assets";
+import { InsertIcon, LinkIcon } from "../../assets";
 import { getSelectionContext, toggleStyle } from "../../utils";
 import { Tooltip } from "./Tooltip";
 
@@ -62,11 +62,7 @@ export const InsertLinkButton = (props: InsertLinkButtonProps) => {
     <>
       <button className="rt-button" disabled={readOnly} onClick={togglePopover}>
         <Tooltip content="Insert Link">
-          <img
-            src={!readOnly ? LinkIcon : LinkIconDisabled}
-            alt="Link Icon"
-            className="rt-icon"
-          />
+          <LinkIcon disabled={readOnly} />
         </Tooltip>
       </button>
       {/* Popover */}
@@ -108,7 +104,7 @@ export const InsertLinkButton = (props: InsertLinkButtonProps) => {
             }}
           >
             <Tooltip content="Insert">
-              <img src={InsertIcon} alt="Insert Icon" className="rt-icon" />
+              <InsertIcon />
             </Tooltip>
           </button>
         </div>

src/Toolbar/components/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { TooltipProps } from "../../types";
 
 /**

src/assets/FontSizeIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+type FontSizeIconProps = {
+  disabled?: boolean;
+};
+
+export const FontSizeIcon = (props: FontSizeIconProps) => {
+  const { disabled = false } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      height="16px"
+      width="16px"
+      fill={disabled ? "#a0a0a0" : ""}
+      className="rt-icon"
+    >
+      <path
+        d="m13.5004086 16.493803 2.4079342-7.22380254h2.1812571l2.9104001 8.72502844h-1.9680411l-.5686369-1.9267771h-2.9665097l-.6427438 1.9267771h-.8528973l.0016582.0049711h-2.7067526l-.7820768-2.65h-4.08l-.884 2.65h-2.55l4-12h3zm-6.5004086-3.493803h3l-1.504-4zm8.9083428 1.3596004h2.1812571l-1.0935369-2.9083428z"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};

src/assets/HighlighterIcon.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+type HighlighterIconProps = {
+  disabled?: boolean;
+};
+
+export const HighlighterIcon = (props: HighlighterIconProps) => {
+  const { disabled = false } = props;
+  return (
+    <svg
+      viewBox="0 0 1024 1024"
+      height="16px"
+      width="16px"
+      xmlns="http://www.w3.org/2000/svg"
+      fill={disabled ? "#a0a0a0" : "#000000"}
+      className="rt-icon"
+    >
+      <g strokeWidth="0"></g>
+      <g strokeLinecap="round" strokeLinejoin="round"></g>
+      <g>
+        <path
+          fill="#fff"
+          d="M229.6 796.3h160.2l54.3-54.1-80.1-78.9zm220.7-397.1l262.8 258.9 147.3-145-262.8-259zm-77.1 166.1l171.4 168.9 68.6-67.6-171.4-168.9z"
+        ></path>
+        <path d="M957.6 507.5L603.2 158.3a7.9 7.9 0 0 0-11.2 0L353.3 393.5a8.03 8.03 0 0 0-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 0 0-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8v55.2c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6L539 830a7.9 7.9 0 0 0 11.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0 0 11.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2zM389.8 796.3H229.6l134.4-133 80.1 78.9-54.3 54.1zm154.8-62.1L373.2 565.3l68.6-67.6 171.4 168.9-68.6 67.6zm168.5-76.1L450.3 399.2l147.3-145.1 262.8 259-147.3 145z"></path>
+      </g>
+    </svg>
+  );
+};

src/assets/InsertIcon.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export const InsertIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1030.29 1063.18"
+      height="16px"
+      width="16px"
+      className="rt-icon"
+    >
+      <path d="M518.29 21.333c282.674.127 511.777 229.308 511.777 512 0 141.273-57.217 269.182-149.74 361.818l.004-.004C787.095 991.616 656.54 1051.51 512 1051.51c-282.77 0-512-229.23-512-512 0-144.484 59.848-274.99 156.107-368.08l.143-.138c92.14-92.633 219.696-149.96 360.64-149.96h1.477-.076zm0 955.733c245.067 0 443.733-198.666 443.733-443.733S763.357 89.6 518.29 89.6 74.557 288.266 74.557 533.333c.285 244.952 198.78 443.448 443.705 443.733h.028zm260.78-409.6H257.51V499.2H779.07zM552.422 794.112h-68.267V272.555h68.267z" />
+    </svg>
+  );
+};

src/assets/LinkIcon.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+type LinkIconProps = {
+  disabled?: boolean;
+};
+
+export const LinkIcon = (props: LinkIconProps) => {
+  const { disabled = false } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      height="16px"
+      width="16px"
+      fill={disabled ? "#a0a0a0" : ""}
+      className="rt-icon"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M3.96 11.38C4.24 9.91 5.62 8.9 7.12 8.9h2.93c.52 0 .95-.43.95-.95S10.57 7 10.05 7H7.22c-2.61 0-4.94 1.91-5.19 4.51C1.74 14.49 4.08 17 7 17h3.05c.52 0 .95-.43.95-.95s-.43-.95-.95-.95H7c-1.91 0-3.42-1.74-3.04-3.72zM9 13h6c.55 0 1-.45 1-1s-.45-1-1-1H9c-.55 0-1 .45-1 1s.45 1 1 1zm7.78-6h-2.83c-.52 0-.95.43-.95.95s.43.95.95.95h2.93c1.5 0 2.88 1.01 3.16 2.48.38 1.98-1.13 3.72-3.04 3.72h-3.05c-.52 0-.95.43-.95.95s.43.95.95.95H17c2.92 0 5.26-2.51 4.98-5.49-.25-2.6-2.59-4.51-5.2-4.51z" />
+    </svg>
+  );
+};