Adding Arabic Language (#732)

* Create ar.json

* Update Tldraw.tsx

* Update types.ts

* Update LanguageMenu.tsx

* Update Tldraw.tsx

* Update LanguageMenu.tsx

packages/tldraw/src/Tldraw.tsx

@@ -16,6 +16,7 @@ import { Loading } from '~components/Loading'
 import { ErrorBoundary as _Errorboundary } from 'react-error-boundary'
 import { ErrorFallback } from '~components/ErrorFallback'
 
+import messages_ar from './translations/ar.json'
 import messages_en from './translations/en.json'
 import messages_fr from './translations/fr.json'
 import messages_it from './translations/it.json'
@@ -431,6 +432,7 @@ const InnerTldraw = React.memo(function InnerTldraw({
     isInSession || !isSelecting || !settings.showCloneHandles || pageState.camera.zoom < 0.2
 
   const messages = {
+    ar: messages_ar,
     en: messages_en,
     fr: messages_fr,
     it: messages_it,

packages/tldraw/src/components/TopPanel/LanguageMenu/LanguageMenu.tsx

@@ -17,6 +17,7 @@ export function LanguageMenu() {
   const intl = useIntl()
 
   const languages: ILang[] = [
+    { label: 'عربي', code: 'ar' },
     { label: 'English', code: 'en' },
     { label: 'Français', code: 'fr' },
     { label: 'Italiano', code: 'it' },

packages/tldraw/src/translations/ar.json

@@ -0,0 +1,99 @@
+{
+  "style.menu.color": "اللون",
+  "style.menu.fill": "يملأ",
+  "style.menu.dash": "متقطع",
+  "style.menu.size": "حجم",
+  "style.menu.keep.open": "تبقى مفتوحة",
+  "style.menu.font": "الخط",
+  "style.menu.align": "محاذاة",
+  "styles": "الأنماط",
+
+  "zoom.in": "تكبير",
+  "zoom.out": "تصغير",
+  "to": "إلى",
+  "to.selection": "للاختيار",
+  "to.fit": "تناسب",
+
+  "menu.file": "ملف",
+  "menu.edit": "تحرير",
+  "menu.view": "معاينة",
+  "menu.preferences": "التفضيلات",
+  "menu.sign.in": "تسجيل الدخول",
+  "menu.sign.out": "خروج",
+  "sponsored": "برعاية",
+  "become.a.sponsor": "كن راعياً",
+  "zoom.to.selection": "تكبير للتحديد",
+  "zoom.to.fit": "تكبير لتناسب",
+  "zoom.to": "تكبير إلى",
+
+  "preferences.dark.mode": "الوضع الداكن",
+  "preferences.focus.mode": "وضع التركيز",
+  "preferences.debug.mode": "وضع التصحيح",
+  "preferences.show.grid": "اظهر الشبكة",
+  "preferences.use.cad.selection": "استخدام التحديد CAD",
+  "preferences.keep.stylemenu.open": "الاحتفاظ بقائمة النمط مفتوحة",
+  "preferences.always.show.snaps": "إظهار اللقطات دائمًا",
+  "preferences.rotate.handles": "تدوير المقابض",
+  "preferences.binding.handles": "مقابض ملزمة",
+  "preferences.clone.handles": "مقابض استنساخ",
+
+  "undo": "الغاء",
+  "redo": "إعادة",
+  "cut": "قطع",
+  "copy": "نسح",
+  "paste": "لصق",
+  "copy.as": "نسخ الى",
+  "export.as": "صدر الى",
+  "select.all": "اختر الكل",
+  "select.none": "لا تختر شيء",
+  "delete": "حذف",
+
+  "new.project": "مشروع جديد",
+  "open": "فتح",
+  "save": "حفظ",
+  "save.as": "حفظ باسم",
+  "upload.media": "تحميل الوسائط",
+
+  "create.page": "إنشاء صفحة",
+  "new.page": "صفحة جديدة",
+  "page.name": "اسم الصفحة",
+  "duplicate": "نسخ",
+  "cancel": "الغاء",
+  "copy.invite.link": "نسخ رابط الدعوة",
+  "create.multiplayer.project": "قم بإنشاء مشروع متعدد اللاعبين",
+  "copy.multiplayer.project": "نسخ إلى مشروع متعدد اللاعبين",
+
+  "select": "اختر",
+  "eraser": "ممحاة",
+  "draw": "رسم",
+  "arrow": "سهم",
+  "text": "نص",
+  "sticky": "لاصق",
+  "Rectangle": "مربع",
+  "Ellipse": "بيضاوي",
+  "Triangle": "مثلث",
+  "Line": "خط",
+
+  "rotate": "دوّر",
+  "lock.aspect.ratio": "قفل نسبة الابعاد",
+  "unlock.aspect.ratio": "فتح قفل نسبة الابعاد",
+  "group": "جمّع",
+  "ungroup": "فك التجمع",
+  "move.to.back": "انتقل إلى الخلف",
+  "move.backward": "تحريك للخلف",
+  "move.forward": "تحريك للأمام",
+  "move.to.front": "تحرك للأمام",
+  "reset.angle": "إعادة ضبط الزاوية",
+  "lock": "قفل",
+  "unlock": "الغاء القفل",
+
+  "move.to.page": "انقل إلى الصفحة",
+  "flip.horizontal": "انعكاس أفقي",
+  "flip.vertical": "انعكاس عمودي",
+  "move": "حرّك",
+  "to.front": "للامام",
+  "forward": "للخلف",
+  "backward": "للوراء",
+  "back": "خلف",
+  "language": "لغة"
+}

packages/tldraw/src/types.ts

@@ -76,7 +76,7 @@ export class TDEventHandler {
   onShapeClone?: TLShapeCloneHandler
 }
 
-export type TDLanguage = 'en' | 'fr' | 'it' | 'zh-cn'
+export type TDLanguage = 'ar' | 'en' | 'fr' | 'it' | 'zh-cn'
 
 // The shape of the TldrawApp's React (zustand) store
 export interface TDSnapshot {