Moduletrace/tailwind-ui-library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
tben
2026-10-01 08:02:47 +01:00
parent 6392457ffb
commit 3dc9f12ad4
104 changed files with 6536 additions and 1037 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editors/TinyMCE/index.tsx
+28 -30
View File
@@ -1,5 +1,5 @@
import React, { ComponentProps, MutableRefObject } from "react";
import { RawEditorOptions, TinyMCE, Editor } from "./tinymce";
import React, { useCallback, type ComponentProps, type RefObject } from "react";
import { type Editor, type RawEditorOptions } from "./tinymce";
import { twMerge } from "tailwind-merge";
import twuiSlugToNormalText from "../../utils/slug-to-normal-text";
import Border from "../../elements/Border";
@@ -7,7 +7,7 @@ import useTinyMCE from "./useTinyMCE";
export type TinyMCEEditorProps<KeyType extends string> = {
options?: RawEditorOptions;
editorRef?: React.MutableRefObject<Editor | null>;
editorRef?: React.RefObject<Editor | null>;
setEditor?: React.Dispatch<React.SetStateAction<Editor>>;
wrapperProps?: React.DetailedHTMLProps<
React.HTMLAttributes<HTMLDivElement>,
@@ -20,11 +20,12 @@ export type TinyMCEEditorProps<KeyType extends string> = {
borderProps?: ComponentProps<typeof Border>;
defaultValue?: string;
name?: KeyType;
changeHandler?: (content: string) => void;
changeHandler?: (content: string, editor?: Editor) => void;
showLabel?: boolean;
useParentCSS?: boolean;
placeholder?: string;
refreshDependencyArray?: any[];
base_url?: string;
};
/**
@@ -45,11 +46,12 @@ export default function TinyMCEEditor<KeyType extends string>({
useParentCSS,
placeholder,
refreshDependencyArray,
base_url,
}: TinyMCEEditorProps<KeyType>) {
const { tinyMCE } = useTinyMCE();
const { tinyMCE } = useTinyMCE({ base_url });
const editorComponentRef = React.useRef<HTMLDivElement>(null);
const editorRef: MutableRefObject<Editor | null> =
const editorRef: RefObject<Editor | null> =
passedEditorRef || React.useRef(null);
const EDITOR_VALUE_CHANGE_TIMEOUT = 500;
@@ -59,7 +61,6 @@ export default function TinyMCEEditor<KeyType extends string>({
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";
@@ -81,13 +82,28 @@ export default function TinyMCEEditor<KeyType extends string>({
const id = crypto.randomUUID();
const updateContent = useCallback((editor: Editor) => {
if (changeHandler) {
window.clearTimeout(valueTimeout);
valueTimeout = setTimeout(() => {
changeHandler(
editor.getContent(),
editorRef.current || undefined,
);
}, EDITOR_VALUE_CHANGE_TIMEOUT);
}
}, []);
React.useEffect(() => {
if (!editorComponentRef.current || !themeReady || !tinyMCE) {
return;
}
const baseUrl =
base_url ||
process.env.NEXT_PUBLIC_TINYMCE_BASE_URL ||
process.env.BUNEXT_PUBLIC_TINYMCE_BASE_URL ||
"https://www.datasquirel.com/tinymce-public";
tinyMCE.init({
@@ -96,11 +112,10 @@ export default function TinyMCEEditor<KeyType extends string>({
plugins:
"advlist lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount",
toolbar:
"undo redo | blocks | bold italic underline link image | bullist numlist outdent indent | removeformat code searchreplace wordcount preview insertdatetime",
"undo redo | blocks | bold italic underline link image | align bullist numlist | outdent indent removeformat code searchreplace wordcount preview insertdatetime",
content_style:
"body { font-family:Helvetica,Arial,sans-serif; font-size:14px; background-color: transparent }",
init_instance_callback: (editor) => {
setEditor(editor as any);
if (editorRef) {
editorRef.current = editor;
passedSetEditor?.(editor);
@@ -108,18 +123,12 @@ export default function TinyMCEEditor<KeyType extends string>({
if (defaultValue) editor.setContent(defaultValue);
setReady(true);
// editor.on("change", (e) => {
// changeHandler?.(editor.getContent());
// });
editor.on("change", (e) => {
updateContent(editor);
});
editor.on("input", (e) => {
if (changeHandler) {
window.clearTimeout(valueTimeout);
valueTimeout = setTimeout(() => {
changeHandler(editor.getContent());
}, EDITOR_VALUE_CHANGE_TIMEOUT);
}
updateContent(editor);
});
if (useParentCSS) {
@@ -149,14 +158,6 @@ export default function TinyMCEEditor<KeyType extends string>({
};
}, [tinyMCE, themeReady, refresh, ...(refreshDependencyArray || [])]);
React.useEffect(() => {
const instance = editorRef.current;
if (instance) {
instance.setContent(defaultValue || "");
}
}, [defaultValue]);
return (
<div
{...wrapperWrapperProps}
@@ -165,9 +166,6 @@ export default function TinyMCEEditor<KeyType extends string>({
"bg-background-light dark:bg-background-dark",
wrapperWrapperProps?.className,
)}
onInput={(e) => {
console.log(`Input Detected`);
}}
>
{showLabel && (
<label
components/editors/TinyMCE/tinymce.ts
+4269
View File
File diff suppressed because it is too large Load Diff
components/editors/TinyMCE/useTinyMCE.tsx
+8 -2
View File
@@ -1,9 +1,13 @@
import React from "react";
import { TinyMCE } from "./tinymce";
import type { TinyMCE } from "./tinymce";
let interval: any;
export default function useTinyMCE() {
type Params = {
base_url?: string;
};
export default function useTinyMCE(params?: Params) {
const [tinyMCE, setTinyMCE] = React.useState<TinyMCE>();
const [refresh, setRefresh] = React.useState(0);
const [scriptLoaded, setScriptLoaded] = React.useState(false);
@@ -21,7 +25,9 @@ export default function useTinyMCE() {
const script = document.createElement("script");
const baseUrl =
params?.base_url ||
process.env.NEXT_PUBLIC_TINYMCE_BASE_URL ||
process.env.BUNEXT_PUBLIC_TINYMCE_BASE_URL ||
"https://www.datasquirel.com/tinymce-public";
script.src = `${baseUrl}/tinymce.min.js`;