From f40bcb6586797dfeafe48dba85624fe4204ba62b Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 28 May 2025 16:51:31 +0200 Subject: [PATCH 1/3] hide toolbar --- src/Components/Input/TextAreaInput.tsx | 13 ++++++++++++- src/assets/css/easymde.css | 8 ++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx index b24c62ad..c21e5968 100644 --- a/src/Components/Input/TextAreaInput.tsx +++ b/src/Components/Input/TextAreaInput.tsx @@ -32,6 +32,7 @@ export function TextAreaInput({ }: TextAreaProps) { const ref = useRef(null) const [inputValue, setInputValue] = useState(defaultValue) + const [showToolbar, setShowToolbar] = useState(false) useEffect(() => { setInputValue(defaultValue) @@ -45,6 +46,14 @@ export function TextAreaInput({ } } + const handleFocus = () => { + setShowToolbar(true) + } + + const handleBlur = () => { + setShowToolbar(false) + } + const options = useMemo(() => { return { status: false, @@ -136,8 +145,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 e7266f00..032d87b6 100644 --- a/src/assets/css/easymde.css +++ b/src/assets/css/easymde.css @@ -1,8 +1,8 @@ @import 'tailwindcss' prefix(tw); -@import 'easymde/dist/easymde.min.css'; - @layer easymde { + @import 'easymde/dist/easymde.min.css'; + .EasyMDEContainer h1 { @apply tw:text-4xl; @apply tw:font-bold; @@ -38,4 +38,8 @@ .EasyMDEContainer button.active, button:hover{ background: var(--color-base-100) !important; } + + .hide-toolbar .EasyMDEContainer .editor-toolbar { + display: none; + } } From ae95732358a8c105570b4e5569c9daa7d2ee84f2 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 28 May 2025 17:22:34 +0200 Subject: [PATCH 2/3] font awesome no longer external --- package-lock.json | 35 ++++++++++++++++++++++++++ package.json | 2 ++ src/Components/Input/TextAreaInput.tsx | 1 + src/css.tsx | 33 ++++++++++++++++++++++++ 4 files changed, 71 insertions(+) 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 c21e5968..0ea46ee1 100644 --- a/src/Components/Input/TextAreaInput.tsx +++ b/src/Components/Input/TextAreaInput.tsx @@ -60,6 +60,7 @@ export function TextAreaInput({ lineNumbers: false, minHeight: '150px', forceSync: true, + autoDownloadFontAwesome: false, /* autoDownloadFontAwesome?: boolean; autofocus?: boolean; 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() From 155cb493e3e4a6130994cd7960c03e5e005d245b Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 28 May 2025 17:24:22 +0200 Subject: [PATCH 3/3] fix fullscreen mode --- src/Components/Input/TextAreaInput.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx index 0ea46ee1..387f6afa 100644 --- a/src/Components/Input/TextAreaInput.tsx +++ b/src/Components/Input/TextAreaInput.tsx @@ -50,9 +50,12 @@ export function TextAreaInput({ setShowToolbar(true) } + /* + // Collides with fullscreen mode const handleBlur = () => { setShowToolbar(false) } + */ const options = useMemo(() => { return { @@ -147,7 +150,7 @@ export function TextAreaInput({ placeholder={placeholder ?? ''} onChange={handleChange} onFocus={handleFocus} - onBlur={handleBlur} + // onBlur={handleBlur} options={options} className={`${inputStyle ?? ''} ${showToolbar ? '' : 'hide-toolbar'}`} />