reactjs-tiptap-editor-pro 0.2.29 → 0.2.30

package/src/hooks/useCopy.tsx

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+function useCopy() {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setIsCopied(true);
+      setTimeout(() => setIsCopied(false), 2000); // Reset the copy status after 2 seconds
+    } catch (error) {
+      console.error('Failed to copy text: ', error);
+      setIsCopied(false);
+    }
+  };
+
+  return { isCopied, copyToClipboard };
+}
+
+export default useCopy;

package/src/hooks/useEditorState.tsx

@@ -0,0 +1,23 @@
+import type { Editor } from '@tiptap/core';
+import { useEffect, useRef, useState } from 'react';
+
+export interface UseEditorStateReturn {
+  isReady: boolean
+  editor: Editor | null
+  editorRef: React.MutableRefObject<{ editor: Editor | null }>
+}
+
+export function useEditorState(): UseEditorStateReturn {
+  const editorRef = useRef<{ editor: Editor | null }>({ editor: null });
+  const [isReady, setIsReady] = useState(false);
+  const [editor, setEditor] = useState<Editor | null>(null);
+
+  useEffect(() => {
+    if (editorRef.current?.editor) {
+      setIsReady(true);
+      setEditor(editorRef.current.editor);
+    }
+  }, [editorRef, editorRef.current?.editor]);
+
+  return { isReady, editor, editorRef };
+}

package/src/hooks/useExtension.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+import type { Editor } from '@tiptap/core';
+
+export function useExtension(editor: Editor, attrbute: string) {
+  const [extension, setExtension] = useState<any>(undefined);
+
+  useEffect(() => {
+    const listener = () => {
+      const extension = editor.extensionManager.extensions.find(extension => extension.name === attrbute);
+
+      if (!extension) {
+        return;
+      }
+
+      setExtension(extension as any);
+    };
+
+    editor.on('selectionUpdate', listener);
+    editor.on('transaction', listener);
+
+    return () => {
+      editor.off('selectionUpdate', listener);
+      editor.off('transaction', listener);
+    };
+  }, [editor, attrbute]);
+
+  return extension;
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+import { useEditorState } from '@/hooks/useEditorState';
+
+export { default } from '@/components/RichTextEditor';
+
+export type { UseEditorStateReturn } from '@/hooks/useEditorState';
+export { useEditorState };
+export { BubbleMenu } from '@tiptap/react';
+export type { Editor, UseEditorOptions } from '@tiptap/react';

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+// asd

package/src/locale-bundle.ts

@@ -0,0 +1,3 @@
+import locale, { en, hu_HU, pt_BR, vi, zh_CN } from './locales';
+
+export { locale, en, hu_HU, vi, zh_CN, pt_BR };

package/src/locales/en.ts

@@ -0,0 +1,173 @@
+const locale = {
+  'editor.remove': 'Remove',
+  'editor.copy': 'Copy',
+  'editor.words': 'WORDS',
+  'editor.characters': 'CHARACTERS',
+  'editor.default': 'Default',
+  'editor.recent': 'Recently Used',
+  'editor.nofill': 'No Fill',
+  'editor.format': 'Format Painter',
+  'editor.delete': 'Delete',
+  'editor.edit': 'Edit',
+  'editor.settings': 'Settings',
+  'editor.table_of_content': 'Table of Content',
+  'editor.draghandle.tooltip': 'Modify',
+  'editor.copyToClipboard': 'CopyToClipboard',
+  'editor.slash': 'Press \'/\' for commands',
+  'editor.slash.empty': 'No Result',
+  'editor.slash.format': 'Format',
+  'editor.slash.insert': 'Insert',
+  'editor.slash.embed': 'Embed Services',
+  'editor.content': 'Please input content',
+  'editor.fontFamily.tooltip': 'Font Family',
+  'editor.fontFamily.default.tooltip': 'Default',
+  'editor.moremark': 'More Text Styles',
+  'editor.size.small.tooltip': 'Small',
+  'editor.size.medium.tooltip': 'Medium',
+  'editor.size.large.tooltip': 'Cover',
+  'editor.bold.tooltip': 'Bold',
+  'editor.italic.tooltip': 'Italic',
+  'editor.underline.tooltip': 'Underline',
+  'editor.strike.tooltip': 'Strike',
+  'editor.color.tooltip': 'Color',
+  'editor.color.more': 'More Colors',
+  'editor.highlight.tooltip': 'Highlight',
+  'editor.lineheight.tooltip': 'Line Height',
+  'editor.heading.tooltip': 'Headings',
+  'editor.heading.h1.tooltip': 'Heading 1',
+  'editor.heading.h2.tooltip': 'Heading 2',
+  'editor.heading.h3.tooltip': 'Heading 3',
+  'editor.heading.h4.tooltip': 'Heading 4',
+  'editor.heading.h5.tooltip': 'Heading 5',
+  'editor.heading.h6.tooltip': 'Heading 6',
+  'editor.paragraph.tooltip': 'Paragraph',
+  'editor.textalign.tooltip': 'Align',
+  'editor.textalign.left.tooltip': 'Left',
+  'editor.textalign.center.tooltip': 'Center',
+  'editor.textalign.right.tooltip': 'Right',
+  'editor.textalign.justify.tooltip': 'Justify',
+  'editor.indent': 'Indent',
+  'editor.indent.indent': 'Increase Indent',
+  'editor.indent.outdent': 'Decrease Indent',
+  'editor.fontSize.tooltip': 'Font size',
+  'editor.fontSize.default.tooltip': 'Default',
+  'editor.superscript.tooltip': 'Superscript',
+  'editor.subscript.tooltip': 'Subscript',
+  'editor.bulletlist.tooltip': 'Bullet List',
+  'editor.orderedlist.tooltip': 'Ordered List',
+  'editor.tasklist.tooltip': 'Task List',
+  'editor.indent.tooltip': 'Indent',
+  'editor.outdent.tooltip': 'Outdent',
+  'editor.columns.tooltip': 'Columns',
+  'editor.link.tooltip': 'Link',
+  'editor.link.unlink.tooltip': 'UnLink',
+  'editor.link.open.tooltip': 'Open Link',
+  'editor.link.edit.tooltip': 'Edit Link',
+  'editor.link.dialog.title': 'Insert Link',
+  'editor.link.dialog.link': 'Link',
+  'editor.link.dialog.text': 'Text',
+  'editor.link.dialog.openInNewTab': 'Open In New Tab',
+  'editor.link.dialog.link.placeholder': 'Link Address',
+  'editor.link.dialog.text.placeholder': 'Add Description',
+  'editor.link.dialog.button.apply': 'Apply',
+  'editor.image.tooltip': 'Image',
+  'editor.image.dragger.tooltip': 'Click or drag the image to the area to upload',
+  'editor.image.float.left.tooltip': 'Float left',
+  'editor.image.float.none.tooltip': 'Float none',
+  'editor.image.float.right.tooltip': 'Float right',
+  'editor.image.dialog.title': 'Add an image',
+  'editor.image.dialog.tab.url': 'Url',
+  'editor.image.dialog.tab.upload': 'Upload',
+  'editor.image.dialog.tab.uploadCrop': 'Upload & Crop',
+  'editor.image.dialog.uploading': 'Uploading',
+  'editor.link.dialog.inline': 'Inline',
+  'editor.image.dialog.form.link': 'Link',
+  'editor.image.dialog.placeholder': 'Link',
+  'editor.image.dialog.form.alt': 'Alt',
+  'editor.image.dialog.form.aspectRatio': 'Lock original aspect ratio',
+  'editor.image.dialog.form.file': 'File',
+  'editor.image.dialog.button.apply': 'Apply',
+  'editor.video.tooltip': 'Video',
+  'editor.video.dialog.tab.upload': 'Upload',
+  'editor.video.dialog.uploading': 'Uploading',
+  'editor.video.dialog.title': 'Embed or upload a video',
+  'editor.video.dialog.link': 'Link',
+  'editor.video.dialog.placeholder': 'Link',
+  'editor.video.dialog.button.apply': 'Apply',
+  'editor.table.tooltip': 'Table',
+  'editor.table.menu.insert_table': 'Insert Table',
+  'editor.table.menu.insert_table.with_header_row': 'With header row',
+  'editor.table.menu.add_column_before': 'Add Column Before',
+  'editor.table.menu.add_column_after': 'Add Column After',
+  'editor.table.menu.delete_column': 'Delete Column',
+  'editor.table.menu.add_row_before': 'Add Row Before',
+  'editor.table.menu.add_row_after': 'Add Row After',
+  'editor.table.menu.delete_row': 'Delete Row',
+  'editor.table.menu.merge_or_split_cells': 'Merge Or Split Cells',
+  'editor.table.menu.delete_table': 'Delete Table',
+  'editor.blockquote.tooltip': 'Blockquote',
+  'editor.horizontalrule.tooltip': 'Horizontal Rule',
+  'editor.code.tooltip': 'Code',
+  'editor.codeblock.tooltip': 'Code Block',
+  'editor.clear.tooltip': 'Clear Format',
+  'editor.undo.tooltip': 'Undo',
+  'editor.redo.tooltip': 'Redo',
+  'editor.fullscreen.tooltip.fullscreen': 'Fullscreen',
+  'editor.fullscreen.tooltip.exit': 'Fullscreen Exit',
+  'editor.imageUpload.cancel': 'Cancel',
+  'editor.imageUpload.crop': 'Crop',
+  'editor.imageUpload.fileTypeNotSupported': 'File type not supported',
+  'editor.imageUpload.fileSizeTooBig': 'File size too big, Maximum size is',
+  'editor.table.menu.insertColumnBefore': 'Insert Column Before',
+  'editor.table.menu.insertColumnAfter': 'Insert Column After',
+  'editor.table.menu.deleteColumn': 'Delete Column',
+  'editor.table.menu.insertRowAbove': 'Insert Row Above',
+  'editor.table.menu.insertRowBelow': 'Insert Row Below',
+  'editor.table.menu.deleteRow': 'Delete Row',
+  'editor.table.menu.mergeCells': 'Merge Cells',
+  'editor.table.menu.splitCells': 'Split Cells',
+  'editor.table.menu.deleteTable': 'Delete Table',
+  'editor.table.menu.setCellsBgColor': 'Cell Background Color',
+  'editor.emoji.tooltip': 'Emoji',
+  'editor.iframe.tooltip': 'Iframe',
+  'editor.searchAndReplace.tooltip': 'Search and Replace',
+  'editor.search.dialog.text': 'Search',
+  'editor.replace.dialog.text': 'Replace',
+  'editor.replaceAll.dialog.text': 'Replace All',
+  'editor.previous.dialog.text': 'Previous',
+  'editor.next.dialog.text': 'Next',
+  'no_result_found': 'No results found',
+  'Smileys & People': 'Smileys & People',
+  'Animals & Nature': 'Animals & Nature',
+  'Food & Drink': 'Food & Drink',
+  'Activity': 'Activity',
+  'Travel & Places': 'Travel & Places',
+  'Object': 'Objects',
+  'Symbol': 'Symbols',
+  'Flags': 'Flags',
+  'Frequently used': 'Frequently used',
+  'editor.formula.dialog.text': 'Formula',
+  'editor.katex.tooltip': 'Math Formula',
+  'editor.exportPdf.tooltip': 'Export PDF',
+  'editor.exportWord.tooltip': 'Export Word',
+  'editor.importWord.tooltip': 'Import Word',
+  'editor.importWord.limitSize': 'File size cannot exceed',
+  'editor.importWord.converting': 'Converting Word document, please wait...',
+  'editor.importWord.convertError': 'Error parsing Word document',
+  'editor.importWord.importError': 'Error importing Word document',
+  'editor.textDirection.tooltip': 'Text Direction',
+  'editor.textDirection.auto.tooltip': 'Auto',
+  'editor.textDirection.ltr.tooltip': 'Left to Right',
+  'editor.textDirection.rtl.tooltip': 'Right to Left',
+  'editor.attachment.tooltip': 'Attachment',
+  'editor.attachment.uploading': 'Uploading',
+  'editor.attachment.please_upload': 'Please upload the file',
+  'editor.imageGif.tooltip': 'Gif',
+  'editor.replace.caseSensitive': 'Case Sensitive',
+  'editor.mermaid.tooltip': 'Mermaid',
+  'editor.twitter.tooltip': 'Twitter',
+  'editor.tooltip.flipX': 'Flip Horizontal',
+  'editor.tooltip.flipY': 'Flip Vertical',
+};
+
+export default locale;

package/src/locales/hu.ts

@@ -0,0 +1,173 @@
+const locale = {
+  'editor.remove': 'Eltávolítás',
+  'editor.copy': 'Másolás',
+  'editor.words': 'SZAVAK',
+  'editor.characters': 'KARAKTEREK',
+  'editor.default': 'Alapértelmezett',
+  'editor.recent': 'Gyakran használt',
+  'editor.nofill': 'Kitöltés törlése',
+  'editor.format': 'Formátummásoló',
+  'editor.delete': 'Törlés',
+  'editor.edit': 'Szerkesztés',
+  'editor.settings': 'Beállítások',
+  'editor.table_of_content': 'Tartalomjegyzék',
+  'editor.draghandle.tooltip': 'Módosítás',
+  'editor.copyToClipboard': 'Másolás vágólapra',
+  'editor.slash': 'Nyomja meg a \'/\' gombot a parancsokhoz',
+  'editor.slash.empty': 'Nincs találat',
+  'editor.slash.format': 'Formátum',
+  'editor.slash.insert': 'Beszúrás',
+  'editor.slash.embed': 'Szolgáltatások beágyazása',
+  'editor.content': 'Írjon be tartalmat',
+  'editor.fontFamily.tooltip': 'Betűtípus',
+  'editor.fontFamily.default.tooltip': 'Alapértelmezett',
+  'editor.moremark': 'Több betűstílus',
+  'editor.size.small.tooltip': 'Kicsi',
+  'editor.size.medium.tooltip': 'Közepes',
+  'editor.size.large.tooltip': 'Borítókép',
+  'editor.bold.tooltip': 'Félkövér',
+  'editor.italic.tooltip': 'Dőlt betű',
+  'editor.underline.tooltip': 'Aláhúzott',
+  'editor.strike.tooltip': 'Áthúzott',
+  'editor.color.tooltip': 'Szín',
+  'editor.color.more': 'Több szín',
+  'editor.highlight.tooltip': 'Kiemelés',
+  'editor.lineheight.tooltip': 'Sorköz',
+  'editor.heading.tooltip': 'Fejlécek',
+  'editor.heading.h1.tooltip': 'Fejléc 1',
+  'editor.heading.h2.tooltip': 'Fejléc 2',
+  'editor.heading.h3.tooltip': 'Fejléc 3',
+  'editor.heading.h4.tooltip': 'Fejléc 4',
+  'editor.heading.h5.tooltip': 'Fejléc 5',
+  'editor.heading.h6.tooltip': 'Fejléc 6',
+  'editor.paragraph.tooltip': 'Bekezdés',
+  'editor.textalign.tooltip': 'Igazítás',
+  'editor.textalign.left.tooltip': 'Bal',
+  'editor.textalign.center.tooltip': 'Közép',
+  'editor.textalign.right.tooltip': 'Jobb',
+  'editor.textalign.justify.tooltip': 'Sorkizárt',
+  'editor.indent': 'Behúzás',
+  'editor.indent.indent': 'Behúzás Növelése',
+  'editor.indent.outdent': 'Behúzás Csökkentése',
+  'editor.fontSize.tooltip': 'Betűméret',
+  'editor.fontSize.default.tooltip': 'Alapértelmezett',
+  'editor.superscript.tooltip': 'Felső index',
+  'editor.subscript.tooltip': 'Alsó index',
+  'editor.bulletlist.tooltip': 'Felsorolás',
+  'editor.orderedlist.tooltip': 'Rendezett lista',
+  'editor.tasklist.tooltip': 'Feladat lista',
+  'editor.indent.tooltip': 'Behúzás növelése',
+  'editor.outdent.tooltip': 'Behúzás csökkentése',
+  'editor.columns.tooltip': 'Oszlopok',
+  'editor.link.tooltip': 'Link',
+  'editor.link.unlink.tooltip': 'Link törlése',
+  'editor.link.open.tooltip': 'Link megnyitása',
+  'editor.link.edit.tooltip': 'Link szerkesztése',
+  'editor.link.dialog.title': 'Link beszúrása',
+  'editor.link.dialog.link': 'Link',
+  'editor.link.dialog.text': 'Szöveg',
+  'editor.link.dialog.openInNewTab': 'Megnyitás új lapon',
+  'editor.link.dialog.link.placeholder': 'Link célpont',
+  'editor.link.dialog.text.placeholder': 'Szöveg',
+  'editor.link.dialog.button.apply': 'Alkalmaz',
+  'editor.image.tooltip': 'Kép',
+  'editor.image.dragger.tooltip': 'Kattintson vagy húzza a feltölteni kívánt képet a területre',
+  'editor.image.float.left.tooltip': 'Lebegtetés balra',
+  'editor.image.float.none.tooltip': 'Lebegtetés törlése',
+  'editor.image.float.right.tooltip': 'Lebegtetés jobbra',
+  'editor.image.dialog.title': 'Kép hozzáadása',
+  'editor.image.dialog.tab.url': 'URL',
+  'editor.image.dialog.tab.upload': 'Feltöltés',
+  'editor.image.dialog.tab.uploadCrop': 'Feltöltés és körbevágás',
+  'editor.image.dialog.uploading': 'Feltöltés alatt',
+  'editor.link.dialog.inline': 'Soron belüli',
+  'editor.image.dialog.form.link': 'Link',
+  'editor.image.dialog.placeholder': 'Link',
+  'editor.image.dialog.form.alt': 'Alternatív szöveg',
+  'editor.image.dialog.form.aspectRatio': 'Eredeti képarány megtartása',
+  'editor.image.dialog.form.file': 'Fájl',
+  'editor.image.dialog.button.apply': 'Alkalmaz',
+  'editor.video.tooltip': 'Videó',
+  'editor.video.dialog.tab.upload': 'Feltöltés',
+  'editor.video.dialog.uploading': 'Feltöltés alatt',
+  'editor.video.dialog.title': 'Videó beágyazása vagy feltöltése',
+  'editor.video.dialog.link': 'Link',
+  'editor.video.dialog.placeholder': 'Link',
+  'editor.video.dialog.button.apply': 'Alkalmaz',
+  'editor.table.tooltip': 'Táblázat',
+  'editor.table.menu.insert_table': 'Táblázat beszúrása',
+  'editor.table.menu.insert_table.with_header_row': 'Fejléc sorral',
+  'editor.table.menu.add_column_before': 'Oszlop beszúrása balra',
+  'editor.table.menu.add_column_after': 'Oszlop beszúrása jobbra',
+  'editor.table.menu.delete_column': 'Oszlop törlése',
+  'editor.table.menu.add_row_before': 'Sor beszúrása felülre',
+  'editor.table.menu.add_row_after': 'Sor beszúrása alulra',
+  'editor.table.menu.delete_row': 'Sor törlése',
+  'editor.table.menu.merge_or_split_cells': 'Cellák egyesítése vagy szétválasztása',
+  'editor.table.menu.delete_table': 'Táblázat törlése',
+  'editor.blockquote.tooltip': 'Blokkidézet',
+  'editor.horizontalrule.tooltip': 'Vízszintes vonal',
+  'editor.code.tooltip': 'Kód',
+  'editor.codeblock.tooltip': 'Kód Blokk',
+  'editor.clear.tooltip': 'Formatálás Törlése',
+  'editor.undo.tooltip': 'Visszavonás',
+  'editor.redo.tooltip': 'Visszaállítás',
+  'editor.fullscreen.tooltip.fullscreen': 'Teljes képernyős mód',
+  'editor.fullscreen.tooltip.exit': 'Kilépés teljes képernyős módból',
+  'editor.imageUpload.cancel': 'Mégsem',
+  'editor.imageUpload.crop': 'Körbevágás',
+  'editor.imageUpload.fileTypeNotSupported': 'Fájltípus nem támogatott',
+  'editor.imageUpload.fileSizeTooBig': 'A fájlméret túl nagy, a maximum méret',
+  'editor.table.menu.insertColumnBefore': 'Oszlop beszúrása balra',
+  'editor.table.menu.insertColumnAfter': 'Oszlop beszúrása jobbra',
+  'editor.table.menu.deleteColumn': 'Oszlop törlése',
+  'editor.table.menu.insertRowAbove': 'Sor beszúrása felülre',
+  'editor.table.menu.insertRowBelow': 'Sor beszúrása alulra',
+  'editor.table.menu.deleteRow': 'Sor törlése',
+  'editor.table.menu.mergeCells': 'Cellák egyesítése',
+  'editor.table.menu.splitCells': 'Cellék szétválasztása',
+  'editor.table.menu.deleteTable': 'Táblázat törlése',
+  'editor.table.menu.setCellsBgColor': 'Cella háttérszín',
+  'editor.emoji.tooltip': 'Emoji',
+  'editor.iframe.tooltip': 'Beágyazás',
+  'editor.searchAndReplace.tooltip': 'Keresés és csere',
+  'editor.search.dialog.text': 'Keres',
+  'editor.replace.dialog.text': 'Csere',
+  'editor.replaceAll.dialog.text': 'Összes cseréje',
+  'editor.previous.dialog.text': 'Előző',
+  'editor.next.dialog.text': 'Következő',
+  'no_result_found': 'Nincs találat',
+  'Smileys & People': 'Arcok és emberek',
+  'Animals & Nature': 'Állatok és természet',
+  'Food & Drink': 'Étel és ital',
+  'Activity': 'Aktivitás',
+  'Travel & Places': 'Utazás és helyek',
+  'Object': 'Tárgyak',
+  'Symbol': 'Szimbólumok',
+  'Flags': 'Zászlók',
+  'Frequently used': 'Gyakran használt',
+  'editor.formula.dialog.text': 'Formula',
+  'editor.katex.tooltip': 'Matematikai formula',
+  'editor.exportPdf.tooltip': 'PDF exportálása',
+  'editor.exportWord.tooltip': 'Word exportálása',
+  'editor.importWord.tooltip': 'Word importálása',
+  'editor.importWord.limitSize': 'A fájl mérete nem haladhatja meg',
+  'editor.importWord.converting': 'Word dokumentum konvertálása, kérjük, várjon...',
+  'editor.importWord.convertError': 'Hiba a Word-dokumentum elemzésekor',
+  'editor.importWord.importError': 'Hiba a Word dokumentum importálásakor',
+  'editor.textDirection.tooltip': 'Szövegirány',
+  'editor.textDirection.auto.tooltip': 'Automatikus',
+  'editor.textDirection.ltr.tooltip': 'Balról jobbra',
+  'editor.textDirection.rtl.tooltip': 'Jobbról balra',
+  'editor.attachment.tooltip': 'Csatolmány',
+  'editor.attachment.uploading': 'Feltöltés alatt',
+  'editor.attachment.please_upload': 'Töltse fel a fájlt',
+  'editor.imageGif.tooltip': 'Gif',
+  'editor.replace.caseSensitive': 'Kisbetű-nagybetű érzékenység',
+  'editor.mermaid.tooltip': 'Mermaid',
+  'editor.twitter.tooltip': 'Twitter',
+  'editor.tooltip.flipX': 'Vízszintes tükrözés',
+  'editor.tooltip.flipY': 'Függőleges tükrözés',
+};
+
+export default locale;

package/src/locales/index.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useMemo } from 'react';
+import { createSignal, useSignal } from 'reactjs-signal';
+
+import en from './en';
+import pt_BR from './pt-br';
+import vi from './vi';
+import zh_CN from './zh-cn';
+import hu_HU from './hu';
+import mitt from '@/utils/mitt';
+import type { EventType } from '@/utils/mitt';
+import { DEFAULT_LANG_VALUE } from '@/constants';
+
+// Define supported language types
+type LanguageType = 'en' | 'hu_HU' | 'vi' | 'zh_CN' | 'pt_BR' | (string & {});
+
+// Define message key types based on the 'en' locale
+type MessageKeysType = keyof typeof en;
+
+// Interface for locale configuration
+interface LocaleInterface {
+  lang: LanguageType
+  message: Record<LanguageType, Record<MessageKeysType, string>>
+}
+
+// Interface for Mitt events
+interface MittEvents extends Record<EventType, unknown> {
+  lang: LanguageType
+}
+
+// Default locale configuration
+export const DEFAULT_LOCALE: LocaleInterface = {
+  lang: DEFAULT_LANG_VALUE,
+  message: {
+    en,
+    hu_HU,
+    vi,
+    zh_CN,
+    pt_BR,
+  },
+};
+
+class Locale {
+  private emitter;
+  constructor() {
+    this.emitter = mitt<MittEvents>();
+  }
+
+  // Getter and setter for current language
+  get lang(): LanguageType {
+    return DEFAULT_LOCALE.lang;
+  }
+
+  set lang(lang: LanguageType) {
+    if (!this.isLangSupported(lang)) {
+      console.warn(
+        `Can't find the current language "${lang}", Using language "${DEFAULT_LOCALE.lang}" by default`,
+      );
+      return;
+    }
+
+    DEFAULT_LOCALE.lang = lang;
+    this.emitter.emit('lang', lang);
+  }
+
+  // Getter and setter for messages
+  get message(): Record<LanguageType, Record<MessageKeysType, string>> {
+    return DEFAULT_LOCALE.message;
+  }
+
+  set message(message: Record<LanguageType, Record<MessageKeysType, string>>) {
+    DEFAULT_LOCALE.message = message;
+  }
+
+  // Load messages for a specific language
+  loadLangMessage(lang: LanguageType): Record<MessageKeysType, string> {
+    return this.message[lang];
+  }
+
+  // Check if a language is supported
+  private isLangSupported(lang: LanguageType): boolean {
+    const supportedLangs = Object.keys(this.message) as LanguageType[];
+    return supportedLangs.includes(lang);
+  }
+
+  // Set the current language
+  public setLang(lang: LanguageType) {
+    this.lang = lang;
+  }
+
+  // Register a language change watcher
+  public registerWatchLang(hook: (lang: LanguageType) => void) {
+    this.emitter.on('lang', hook);
+
+    const unsubscribe = () => {
+      this.emitter.off('lang', hook);
+    };
+
+    return {
+      unsubscribe,
+    };
+  }
+
+  // Set messages for a specific language
+  public setMessage(lang: string, message: Record<MessageKeysType, string>) {
+    this.message[lang] = message;
+  }
+
+  // Build a translation function for a given language
+  buildLocalesHandler(lang?: LanguageType) {
+    if (!lang) {
+      lang = this.lang;
+    }
+
+    const message = this.loadLangMessage(lang);
+
+    return function t(path: MessageKeysType) {
+      return message[path] || path;
+    };
+  }
+}
+
+const locale = new Locale();
+
+// Proxy for reactive language state
+const atomLang = createSignal(DEFAULT_LOCALE.lang);
+
+function useLocale() {
+  const [lang, setLang] = useSignal(atomLang);
+
+  const t = useMemo(() => {
+    return locale.buildLocalesHandler(lang);
+  }, [lang]);
+
+  useEffect(() => {
+    const watchLang = locale.registerWatchLang((val) => {
+      setLang(val);
+    });
+
+    return () => {
+      watchLang.unsubscribe();
+    };
+  }, []);
+
+  return {
+    lang,
+    t,
+  };
+}
+
+const localeActions = {
+  t: (path: MessageKeysType) => {
+    return locale.buildLocalesHandler(atomLang())(path);
+  },
+};
+
+export default locale;
+export { Locale, localeActions, useLocale };
+
+export { default as en } from './en';
+export { default as pt_BR } from './pt-br';
+export { default as vi } from './vi';
+export { default as zh_CN } from './zh-cn';
+export { default as hu_HU } from './hu';