diff --git a/package-lock.json b/package-lock.json index 3b0dcf24..eeeeab5c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "3.0.94", "license": "GPL-3.0-only", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", "@heroicons/react": "^2.0.17", "@rollup/plugin-commonjs": "^28.0.3", "@tanstack/react-query": "^5.17.8", @@ -993,6 +995,39 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz", + "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz", + "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz", + "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, "node_modules/@gerrit0/mini-shiki": { "version": "1.27.2", "resolved": "https://registry.npmjs.org/@gerrit0/mini-shiki/-/mini-shiki-1.27.2.tgz", diff --git a/package.json b/package.json index 18e44b4b..68b6e6b4 100644 --- a/package.json +++ b/package.json @@ -92,6 +92,8 @@ "react-dom": "^18.2.0" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.7.2", + "@fortawesome/free-solid-svg-icons": "^6.7.2", "@heroicons/react": "^2.0.17", "@rollup/plugin-commonjs": "^28.0.3", "@tanstack/react-query": "^5.17.8", diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx index adf52993..f12fd644 100644 --- a/src/Components/Input/TextAreaInput.tsx +++ b/src/Components/Input/TextAreaInput.tsx @@ -34,6 +34,7 @@ export function TextAreaInput({ }: TextAreaProps) { const ref = useRef(null) const [inputValue, setInputValue] = useState(defaultValue) + const [showToolbar, setShowToolbar] = useState(false) const containerRef = useRef(null) @@ -58,6 +59,17 @@ export function TextAreaInput({ } } + const handleFocus = () => { + setShowToolbar(true) + } + + /* + // Collides with fullscreen mode + const handleBlur = () => { + setShowToolbar(false) + } + */ + const options = useMemo(() => { return { status: false, @@ -65,6 +77,7 @@ export function TextAreaInput({ minHeight: size === 'small' ? '100%' : '100%', maxHeight: size === 'small' ? '30px' : containerHeight, forceSync: true, + autoDownloadFontAwesome: true, /* autoDownloadFontAwesome?: boolean; autofocus?: boolean; @@ -150,8 +163,10 @@ export function TextAreaInput({ value={inputValue} placeholder={placeholder ?? ''} onChange={handleChange} + onFocus={handleFocus} + // onBlur={handleBlur} options={options} - className={`${inputStyle ?? ''}`} + className={`${inputStyle ?? ''} ${showToolbar ? '' : 'hide-toolbar'}`} /> ) diff --git a/src/assets/css/easymde.css b/src/assets/css/easymde.css index 37d03de9..0ea9add3 100644 --- a/src/assets/css/easymde.css +++ b/src/assets/css/easymde.css @@ -1,41 +1,48 @@ @import 'tailwindcss' prefix(tw); -@import 'easymde/dist/easymde.min.css'; - @layer easymde { + @import 'easymde/dist/easymde.min.css'; + .EasyMDEContainer h1 { @apply tw:text-3xl; @apply tw:font-bold; } + .EasyMDEContainer h2 { @apply tw:text-2xl; @apply tw:font-bold; } + .EasyMDEContainer h3 { @apply tw:text-xl; @apply tw:font-bold; } + .EasyMDEContainer h4 { @apply tw:text-lg; @apply tw:font-semibold; } + .EasyMDEContainer h5 { @apply tw:text-base; @apply tw:font-semibold; } + .EasyMDEContainer h6 { @apply tw:text-sm; @apply tw:font-semibold; } + .EasyMDEContainer a { @apply tw:text-blue-600 tw:underline; } - .EasyMDEContainer .fullscreen{ + .EasyMDEContainer .fullscreen { background: var(--color-base-100) !important; } - .EasyMDEContainer button.active, button:hover{ + .EasyMDEContainer button.active, + button:hover { background: var(--color-base-100) !important; } @@ -49,4 +56,8 @@ background-color: var(--color-base-100) !important; color: var(--color-base-content) !important; } -} + + .hide-toolbar .EasyMDEContainer .editor-toolbar { + display: none; + } +} \ No newline at end of file diff --git a/src/css.tsx b/src/css.tsx index 6b1737a4..207fc488 100644 --- a/src/css.tsx +++ b/src/css.tsx @@ -16,3 +16,36 @@ import '#assets/css/color-picker.css' // MD Editor import '#assets/css/easymde.css' + +import { dom, library } from '@fortawesome/fontawesome-svg-core' +import { + faBold, + faItalic, + faHeading, + faQuoteLeft, + faListUl, + faListOl, + faLink, + faImage, + faEye, + faColumns, + faArrowsAlt, + faQuestionCircle, +} from '@fortawesome/free-solid-svg-icons' + +library.add([ + faBold, + faItalic, + faHeading, + faQuoteLeft, + faListUl, + faListOl, + faLink, + faImage, + faEye, + faColumns, + faArrowsAlt, + faQuestionCircle, +]) + +dom.insertCss()