From 4a84cce4fa807d30e2c864625f8e6e3314139314 Mon Sep 17 00:00:00 2001 From: BradyMitch Date: Thu, 11 Jan 2024 10:57:14 -0800 Subject: [PATCH] Fixed styling issues and svg build --- app/src/App.css | 4 +++ app/src/App.tsx | 14 ++++---- app/src/index.css | 1 - package.json | 5 +-- rollup.config.js | 2 -- scripts/remove-svg-import-export.js | 40 --------------------- src/Toolbar/Toolbar.tsx | 28 +++------------ src/Toolbar/components/FontSizeButton.tsx | 10 ++---- src/Toolbar/components/InsertLinkButton.tsx | 10 ++---- src/Toolbar/components/Tooltip.tsx | 2 +- src/assets/FontSizeIcon.svg | 3 -- src/assets/FontSizeIcon.tsx | 24 +++++++++++++ src/assets/FontSizeIconDisabled.svg | 3 -- src/assets/HighlighterIcon.svg | 8 ----- src/assets/HighlighterIcon.tsx | 29 +++++++++++++++ src/assets/HighlighterIconDisabled.svg | 8 ----- src/assets/InsertIcon.svg | 3 -- src/assets/InsertIcon.tsx | 15 ++++++++ src/assets/LinkIcon.svg | 4 --- src/assets/LinkIcon.tsx | 22 ++++++++++++ src/assets/LinkIconDisabled.svg | 4 --- src/assets/ListIcon.svg | 4 --- src/assets/ListIcon.tsx | 27 ++++++++++++++ src/assets/ListIconDisabled.svg | 4 --- src/assets/NumberedListIcon.svg | 4 --- src/assets/NumberedListIcon.tsx | 24 +++++++++++++ src/assets/NumberedListIconDisabled.svg | 4 --- src/assets/TextIcon.svg | 4 --- src/assets/TextIcon.tsx | 19 ++++++++++ src/assets/UndoIcon.svg | 4 --- src/assets/UndoIcon.tsx | 33 +++++++++++++++++ src/assets/UndoIconDisabled.svg | 4 --- src/assets/declarations.d.ts | 4 --- src/assets/index.ts | 22 +++++------- src/styles.css | 11 ++++-- 35 files changed, 233 insertions(+), 174 deletions(-) delete mode 100644 scripts/remove-svg-import-export.js delete mode 100644 src/assets/FontSizeIcon.svg create mode 100644 src/assets/FontSizeIcon.tsx delete mode 100644 src/assets/FontSizeIconDisabled.svg delete mode 100644 src/assets/HighlighterIcon.svg create mode 100644 src/assets/HighlighterIcon.tsx delete mode 100644 src/assets/HighlighterIconDisabled.svg delete mode 100644 src/assets/InsertIcon.svg create mode 100644 src/assets/InsertIcon.tsx delete mode 100644 src/assets/LinkIcon.svg create mode 100644 src/assets/LinkIcon.tsx delete mode 100644 src/assets/LinkIconDisabled.svg delete mode 100644 src/assets/ListIcon.svg create mode 100644 src/assets/ListIcon.tsx delete mode 100644 src/assets/ListIconDisabled.svg delete mode 100644 src/assets/NumberedListIcon.svg create mode 100644 src/assets/NumberedListIcon.tsx delete mode 100644 src/assets/NumberedListIconDisabled.svg delete mode 100644 src/assets/TextIcon.svg create mode 100644 src/assets/TextIcon.tsx delete mode 100644 src/assets/UndoIcon.svg create mode 100644 src/assets/UndoIcon.tsx delete mode 100644 src/assets/UndoIconDisabled.svg delete mode 100644 src/assets/declarations.d.ts diff --git a/app/src/App.css b/app/src/App.css index e68e07d..788a7c2 100644 --- a/app/src/App.css +++ b/app/src/App.css @@ -6,3 +6,7 @@ margin: 25px; width: 1000px; } + +.richtextcontainer { + border: 1px solid black; +} diff --git a/app/src/App.tsx b/app/src/App.tsx index 334fe23..87ae30b 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -10,12 +10,14 @@ function App() { return (

RichTextEditor

- +
+ +

{content}

diff --git a/app/src/index.css b/app/src/index.css index 93a5b0e..dfe9d1a 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -16,4 +16,3 @@ h1 { font-size: 3.2em; line-height: 1.1; } - diff --git a/package.json b/package.json index 9a37957..99a700a 100644 --- a/package.json +++ b/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" }, diff --git a/rollup.config.js b/rollup.config.js index 51311da..e2953b6 100644 --- a/rollup.config.js +++ b/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 }), ], }, diff --git a/scripts/remove-svg-import-export.js b/scripts/remove-svg-import-export.js deleted file mode 100644 index b48a527..0000000 --- a/scripts/remove-svg-import-export.js +++ /dev/null @@ -1,40 +0,0 @@ -import { readdirSync, readFileSync, writeFileSync, statSync } from "fs"; -import { resolve, join } from "path"; - -/** - * Removes all imports of *.svg files in *.d.ts files. - * The bundling process for declaration files can't handle svg imports. - */ - -const buildDir = resolve("build"); - -const processDirectory = (directory) => { - const files = readdirSync(directory); - - files.forEach((file) => { - const filePath = join(directory, file); - const fileStat = statSync(filePath); - - if (fileStat.isDirectory()) { - processDirectory(filePath); // Recursively inspect the directory - } else if (file.endsWith(".d.ts")) { - let fileContent = readFileSync(filePath, "utf-8"); - // Remove lines that import SVG files - fileContent = fileContent - .split("\n") - .filter( - (line) => - !( - line.trim().startsWith("import") || - (line.trim().startsWith("export") && line.includes(".svg")) - ) - ) - .join("\n"); - - // Write the cleaned file content back to the file - writeFileSync(filePath, fileContent); - } - }); -}; - -processDirectory(buildDir); diff --git a/src/Toolbar/Toolbar.tsx b/src/Toolbar/Toolbar.tsx index 08031d4..b9e8763 100644 --- a/src/Toolbar/Toolbar.tsx +++ b/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) => { } > - Highlighter Icon + {/* BULLET LIST */} @@ -151,11 +143,7 @@ export const Toolbar = (props: ToolbarProps) => { } > - List Icon + {/* NUMBERED LIST */} @@ -177,11 +165,7 @@ export const Toolbar = (props: ToolbarProps) => { } > - Numbered List Icon + {/* INSERT LINK */} @@ -204,11 +188,7 @@ export const Toolbar = (props: ToolbarProps) => { } > - Undo Icon +
diff --git a/src/Toolbar/components/FontSizeButton.tsx b/src/Toolbar/components/FontSizeButton.tsx index cb7f961..c06fb14 100644 --- a/src/Toolbar/components/FontSizeButton.tsx +++ b/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)} > - Font Size Icon + {/* Popover */} @@ -93,7 +89,7 @@ export const FontSizeButton = (props: FontSizeButtonProps) => { }} > - Text Icon + diff --git a/src/Toolbar/components/InsertLinkButton.tsx b/src/Toolbar/components/InsertLinkButton.tsx index e96cc63..e72bef6 100644 --- a/src/Toolbar/components/InsertLinkButton.tsx +++ b/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) => { <> {/* Popover */} @@ -108,7 +104,7 @@ export const InsertLinkButton = (props: InsertLinkButtonProps) => { }} > - Insert Icon + diff --git a/src/Toolbar/components/Tooltip.tsx b/src/Toolbar/components/Tooltip.tsx index 23e9982..12aacac 100644 --- a/src/Toolbar/components/Tooltip.tsx +++ b/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"; /** diff --git a/src/assets/FontSizeIcon.svg b/src/assets/FontSizeIcon.svg deleted file mode 100644 index bdf2eab..0000000 --- a/src/assets/FontSizeIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/FontSizeIcon.tsx b/src/assets/FontSizeIcon.tsx new file mode 100644 index 0000000..0be442a --- /dev/null +++ b/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 ( + + + + ); +}; diff --git a/src/assets/FontSizeIconDisabled.svg b/src/assets/FontSizeIconDisabled.svg deleted file mode 100644 index 1a84d48..0000000 --- a/src/assets/FontSizeIconDisabled.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/HighlighterIcon.svg b/src/assets/HighlighterIcon.svg deleted file mode 100644 index fe6dc9e..0000000 --- a/src/assets/HighlighterIcon.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/assets/HighlighterIcon.tsx b/src/assets/HighlighterIcon.tsx new file mode 100644 index 0000000..cb57455 --- /dev/null +++ b/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 ( + + + + + + + + + ); +}; diff --git a/src/assets/HighlighterIconDisabled.svg b/src/assets/HighlighterIconDisabled.svg deleted file mode 100644 index 933e1ba..0000000 --- a/src/assets/HighlighterIconDisabled.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/src/assets/InsertIcon.svg b/src/assets/InsertIcon.svg deleted file mode 100644 index e465e52..0000000 --- a/src/assets/InsertIcon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/InsertIcon.tsx b/src/assets/InsertIcon.tsx new file mode 100644 index 0000000..13890bd --- /dev/null +++ b/src/assets/InsertIcon.tsx @@ -0,0 +1,15 @@ +import React from "react"; + +export const InsertIcon = () => { + return ( + + + + ); +}; diff --git a/src/assets/LinkIcon.svg b/src/assets/LinkIcon.svg deleted file mode 100644 index f5a0a88..0000000 --- a/src/assets/LinkIcon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/LinkIcon.tsx b/src/assets/LinkIcon.tsx new file mode 100644 index 0000000..c4a94ec --- /dev/null +++ b/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 ( + + + + + ); +}; diff --git a/src/assets/LinkIconDisabled.svg b/src/assets/LinkIconDisabled.svg deleted file mode 100644 index d3118eb..0000000 --- a/src/assets/LinkIconDisabled.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/ListIcon.svg b/src/assets/ListIcon.svg deleted file mode 100644 index 1bdd1f2..0000000 --- a/src/assets/ListIcon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/ListIcon.tsx b/src/assets/ListIcon.tsx new file mode 100644 index 0000000..8cad615 --- /dev/null +++ b/src/assets/ListIcon.tsx @@ -0,0 +1,27 @@ +import React from "react"; + +type ListIconProps = { + disabled?: boolean; +}; + +export const ListIcon = (props: ListIconProps) => { + const { disabled = false } = props; + return ( + + + + ); +}; diff --git a/src/assets/ListIconDisabled.svg b/src/assets/ListIconDisabled.svg deleted file mode 100644 index a9527c6..0000000 --- a/src/assets/ListIconDisabled.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/NumberedListIcon.svg b/src/assets/NumberedListIcon.svg deleted file mode 100644 index 986360f..0000000 --- a/src/assets/NumberedListIcon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/NumberedListIcon.tsx b/src/assets/NumberedListIcon.tsx new file mode 100644 index 0000000..99af550 --- /dev/null +++ b/src/assets/NumberedListIcon.tsx @@ -0,0 +1,24 @@ +import React from "react"; + +type NumberedListIconProps = { + disabled?: boolean; +}; + +export const NumberedListIcon = (props: NumberedListIconProps) => { + const { disabled = false } = props; + return ( + + + + + ); +}; diff --git a/src/assets/NumberedListIconDisabled.svg b/src/assets/NumberedListIconDisabled.svg deleted file mode 100644 index 6806943..0000000 --- a/src/assets/NumberedListIconDisabled.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/TextIcon.svg b/src/assets/TextIcon.svg deleted file mode 100644 index dbf52cf..0000000 --- a/src/assets/TextIcon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/TextIcon.tsx b/src/assets/TextIcon.tsx new file mode 100644 index 0000000..2350f29 --- /dev/null +++ b/src/assets/TextIcon.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +export const TextIcon = () => { + return ( + + + + + ); +}; diff --git a/src/assets/UndoIcon.svg b/src/assets/UndoIcon.svg deleted file mode 100644 index 1401bfd..0000000 --- a/src/assets/UndoIcon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/UndoIcon.tsx b/src/assets/UndoIcon.tsx new file mode 100644 index 0000000..035bc3c --- /dev/null +++ b/src/assets/UndoIcon.tsx @@ -0,0 +1,33 @@ +import React from "react"; + +type UndoIconProps = { + disabled?: boolean; +}; + +export const UndoIcon = (props: UndoIconProps) => { + const { disabled = false } = props; + return ( + + + + + ); +}; diff --git a/src/assets/UndoIconDisabled.svg b/src/assets/UndoIconDisabled.svg deleted file mode 100644 index 1b0d937..0000000 --- a/src/assets/UndoIconDisabled.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/declarations.d.ts b/src/assets/declarations.d.ts deleted file mode 100644 index 1a3dd3c..0000000 --- a/src/assets/declarations.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare module "*.svg" { - const content: any; - export default content; -} diff --git a/src/assets/index.ts b/src/assets/index.ts index 387245a..eb31ad5 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -1,14 +1,8 @@ -export { default as ListIcon } from "./ListIcon.svg"; -export { default as ListIconDisabled } from "./ListIconDisabled.svg"; -export { default as NumberedListIcon } from "./NumberedListIcon.svg"; -export { default as NumberedListIconDisabled } from "./NumberedListIconDisabled.svg"; -export { default as HighlighterIcon } from "./HighlighterIcon.svg"; -export { default as HighlighterIconDisabled } from "./HighlighterIconDisabled.svg"; -export { default as FontSizeIcon } from "./FontSizeIcon.svg"; -export { default as FontSizeIconDisabled } from "./FontSizeIconDisabled.svg"; -export { default as LinkIcon } from "./LinkIcon.svg"; -export { default as LinkIconDisabled } from "./LinkIconDisabled.svg"; -export { default as UndoIcon } from "./UndoIcon.svg"; -export { default as UndoIconDisabled } from "./UndoIconDisabled.svg"; -export { default as TextIcon } from "./TextIcon.svg"; -export { default as InsertIcon } from "./InsertIcon.svg"; +export { ListIcon } from "./ListIcon"; +export { NumberedListIcon } from "./NumberedListIcon"; +export { HighlighterIcon } from "./HighlighterIcon"; +export { FontSizeIcon } from "./FontSizeIcon"; +export { LinkIcon } from "./LinkIcon"; +export { UndoIcon } from "./UndoIcon"; +export { TextIcon } from "./TextIcon"; +export { InsertIcon } from "./InsertIcon"; diff --git a/src/styles.css b/src/styles.css index 3688601..faa2d5c 100644 --- a/src/styles.css +++ b/src/styles.css @@ -3,8 +3,8 @@ } .rt-container { - width: 100%; - padding: 0; + width: 98%; + padding: 5px; } .rt-toolbar { @@ -31,6 +31,7 @@ cursor: pointer; font-family: 'Times New Roman'; line-height: normal; + text-align: center; } .rt-button:hover { @@ -75,7 +76,7 @@ /* Pseudo-element to cover the top part of .content */ .rt-content::before { content: ''; - position: fixed; + position: relative; top: 6px; border-radius: 5px; left: 9px; @@ -85,6 +86,10 @@ z-index: 2; /* Ensure it's above the content */ } +.rt-toolbar b { + font-weight: 700; +} + .rt-content p { margin: 0; }