tben/new-personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
tben
2025-12-02 16:30:46 +01:00
parent 979728e6c8
commit 0b7c70058d
31 changed files with 298 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/lib/editors/AceEditor.tsx
+2 -2
View File
@@ -114,7 +114,7 @@ export default function AceEditor({
return function () {
editor.destroy();
};
}, [refresh, darkMode, ready, externalRefresh, content]);
}, [refresh, darkMode, ready, externalRefresh]);
React.useEffect(() => {
const htmlClassName = document.documentElement.className;
@@ -145,7 +145,7 @@ export default function AceEditor({
} catch (error: any) {
return (
<React.Fragment>
<span className="text-sm m-0">
<span className="m-0">
Editor Error:{" "}
<b className="text-red-600">{error.message}</b>
</span>
components/lib/editors/TinyMCE/index.tsx
+55 -23
View File
@@ -3,9 +3,9 @@ import { RawEditorOptions, TinyMCE, Editor } from "./tinymce";
import { twMerge } from "tailwind-merge";
import twuiSlugToNormalText from "../../utils/slug-to-normal-text";
import Border from "../../elements/Border";
import useTinyMCE from "./useTinyMCE";
export type TinyMCEEditorProps<KeyType extends string> = {
tinyMCE?: TinyMCE | null;
options?: RawEditorOptions;
editorRef?: React.MutableRefObject<Editor | null>;
setEditor?: React.Dispatch<React.SetStateAction<Editor>>;
@@ -26,8 +26,6 @@ export type TinyMCEEditorProps<KeyType extends string> = {
placeholder?: string;
};
let interval: any;
/**
* # Tiny MCE Editor Component
* @className_wrapper twui-rte-wrapper
@@ -35,8 +33,7 @@ let interval: any;
export default function TinyMCEEditor<KeyType extends string>({
options,
editorRef,
setEditor,
tinyMCE,
setEditor: passedSetEditor,
wrapperProps,
defaultValue,
changeHandler,
@@ -47,29 +44,49 @@ export default function TinyMCEEditor<KeyType extends string>({
useParentCSS,
placeholder,
}: TinyMCEEditorProps<KeyType>) {
const { tinyMCE } = useTinyMCE();
const editorComponentRef = React.useRef<HTMLDivElement>(null);
const EDITOR_VALUE_CHANGE_TIMEOUT = 500;
const FINAL_HEIGHT = options?.height || 500;
const [themeReady, setThemeReady] = React.useState(false);
const [ready, setReady] = React.useState(false);
const [darkMode, setDarkMode] = React.useState(false);
const [refresh, setRefresh] = React.useState(0);
const [editor, setEditor] = React.useState<Editor>();
const title = name ? twuiSlugToNormalText(name) : "Rich Text";
React.useEffect(() => {
const htmlClassName = document.documentElement.className;
if (htmlClassName.match(/dark/i)) setDarkMode(true);
setTimeout(() => {
setThemeReady(true);
}, 200);
}, []);
React.useEffect(() => {
if (!editorComponentRef.current || !themeReady) {
if (!tinyMCE) {
return;
}
tinyMCE?.init({
const htmlClassName = document.documentElement.className;
if (htmlClassName.match(/dark/i)) setDarkMode(true);
setTimeout(() => {
setThemeReady(true);
}, 200);
}, [tinyMCE]);
let valueTimeout: any;
const id = crypto.randomUUID();
React.useEffect(() => {
if (!editorComponentRef.current || !themeReady || !tinyMCE) {
return;
}
const baseUrl =
process.env.NEXT_PUBLIC_TINYMCE_BASE_URL ||
"https://www.datasquirel.com/tinymce-public";
tinyMCE.init({
height: FINAL_HEIGHT,
menubar: false,
plugins:
@@ -79,20 +96,30 @@ export default function TinyMCEEditor<KeyType extends string>({
content_style:
"body { font-family:Helvetica,Arial,sans-serif; font-size:14px; background-color: transparent }",
init_instance_callback: (editor) => {
setEditor?.(editor as any);
setEditor(editor as any);
if (editorRef) editorRef.current = editor as any;
if (defaultValue) editor.setContent(defaultValue);
setReady(true);
editor.on("change", (e) => {
changeHandler?.(editor.getContent());
// editor.on("change", (e) => {
// changeHandler?.(editor.getContent());
// });
editor.on("input", (e) => {
if (changeHandler) {
window.clearTimeout(valueTimeout);
valueTimeout = setTimeout(() => {
changeHandler(editor.getContent());
}, EDITOR_VALUE_CHANGE_TIMEOUT);
}
});
if (useParentCSS) {
useParentStyles(editor);
}
},
base_url: "https://www.datasquirel.com/tinymce-public",
base_url: baseUrl,
body_class: "twui-tinymce",
placeholder,
relative_urls: true,
@@ -106,9 +133,14 @@ export default function TinyMCEEditor<KeyType extends string>({
});
return function () {
tinyMCE?.remove();
if (!ready) return;
const instance = editorComponentRef.current
? tinyMCE?.get(editorComponentRef.current?.id)
: undefined;
instance?.remove();
};
}, [tinyMCE, themeReady]);
}, [tinyMCE, themeReady, refresh]);
return (
<div
@@ -129,7 +161,7 @@ export default function TinyMCEEditor<KeyType extends string>({
"bg-background-light dark:bg-background-dark text-gray-500",
"dark:text-white/80 rounded"
)}
htmlFor={name || "twui-tinymce"}
htmlFor={id}
>
{title}
</label>
@@ -153,7 +185,7 @@ export default function TinyMCEEditor<KeyType extends string>({
"bg-slate-200 dark:bg-slate-700 rounded-sm w-full",
"twui-rte-wrapper"
)}
id={name || "twui-tinymce"}
id={id}
></div>
</Border>
</div>
components/lib/editors/TinyMCE/useTinyMCE.tsx
+33 -16
View File
@@ -4,32 +4,49 @@ import { TinyMCE } from "./tinymce";
let interval: any;
export default function useTinyMCE() {
const [tinyMCE, setTinyMCE] = React.useState<TinyMCE | null>(null);
const [tinyMCE, setTinyMCE] = React.useState<TinyMCE>();
const [refresh, setRefresh] = React.useState(0);
const [scriptLoaded, setScriptLoaded] = React.useState(false);
React.useEffect(() => {
// @ts-ignore
if (window.tinymce) {
console.log("Tinymce already exists");
// @ts-ignore
setTinyMCE(window.tinymce);
if (refresh >= 5) return;
const clientWindow = window as Window & { tinymce?: TinyMCE };
if (clientWindow.tinymce) {
setScriptLoaded(true);
return;
}
const script = document.createElement("script");
script.src =
"https://www.datasquirel.com/tinymce-public/tinymce.min.js";
const baseUrl =
process.env.NEXT_PUBLIC_TINYMCE_BASE_URL ||
"https://www.datasquirel.com/tinymce-public";
script.src = `${baseUrl}/tinymce.min.js`;
script.async = true;
document.head.appendChild(script);
script.onload = () => {
// @ts-ignore
if (window.tinymce) {
// @ts-ignore
setTinyMCE(window.tinymce);
}
setScriptLoaded(true);
};
}, []);
document.head.appendChild(script);
}, [refresh]);
React.useEffect(() => {
if (!scriptLoaded) return;
const clientWindow = window as Window & { tinymce?: TinyMCE };
let tinyMCE = clientWindow.tinymce;
if (tinyMCE) {
setTinyMCE(tinyMCE);
} else {
setRefresh((prev) => prev + 1);
}
}, [scriptLoaded]);
return { tinyMCE };
}