feat(lesson): add rtl support

frontend/src/components/Notes/InlineLessonMenu.vue

@@ -4,7 +4,7 @@
 		:style="{
 			display: top > 0 ? 'block' : 'none',
 			top: top + 'px',
-			left: left + 'px',
+			insetInlineStart: left + 'px',
 		}"
 	>
 		<div class="space-y-2 py-2">

frontend/src/pages/Lesson.vue

@@ -514,6 +514,9 @@ const renderEditor = (holder, content) => {
 		data: JSON.parse(content),
 		readOnly: true,
 		defaultBlock: 'embed',
+		i18n: {
+			direction: document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr',
+		},
 	})
 }
 
@@ -1035,8 +1038,8 @@ usePageMeta(() => {
 	border-radius: 0 0 20px 2px;
 	padding: 2px 26px;
 	padding-top: 0;
-	padding-right: 0;
+	padding-inline-end: 0;
-	text-align: left;
+	text-align: start;
 	cursor: pointer;
 	border: none !important;
 	outline: none !important;
@@ -1044,7 +1047,7 @@ usePageMeta(() => {
 
 .codeBoxSelectDropIcon {
 	position: absolute !important;
-	left: 10px !important;
+	inset-inline-start: 10px !important;
 	bottom: 0 !important;
 	width: unset !important;
 	height: unset !important;
@@ -1101,7 +1104,7 @@ usePageMeta(() => {
 }
 
 .tc-table {
-	border-left: 1px solid #e8e8eb;
+	border-inline-start: 1px solid #e8e8eb;
 }
 
 .plyr__volume input[type='range'] {

frontend/src/pages/LessonForm.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="">
 		<div class="grid md:grid-cols-[75%,25%] h-screen">
-			<div class="border-r">
+			<div class="border-e">
 				<header
 					class="sticky top-0 z-10 flex flex-col md:flex-row md:items-center justify-between border-b overflow-hidden bg-surface-white px-3 py-2.5 sm:px-5"
 				>
@@ -47,10 +47,10 @@
 									{{ __('Instructor Notes') }}
 								</label>
 								<ChevronRight
-									class="stroke-2 h-5 w-5 text-ink-gray-5"
+									class="stroke-2 h-5 w-5 text-ink-gray-5 transform duration-200"
 									:class="{
-										'rotate-90 transform duration-200': openInstructorEditor,
+										'rotate-90': openInstructorEditor,
-										'duration-200': !openInstructorEditor,
+										'rtl:rotate-180': !openInstructorEditor,
 									}"
 								/>
 							</div>
@@ -148,6 +148,9 @@ const renderEditor = (holder) => {
 		holder: holder,
 		tools: getEditorTools(true),
 		defaultBlock: 'markdown',
+		i18n: {
+			direction: document.documentElement.dir === 'rtl' ? 'rtl' : 'ltr',
+		},
 		onChange: async (api, event) => {
 			enablePlyr()
 		},
@@ -533,8 +536,15 @@ usePageMeta(() => {
 	max-width: none;
 }
 
+.ce-toolbar__actions,
 .codex-editor--narrow .ce-toolbar__actions {
-	right: 100%;
+	right: auto;
+	left: auto;
+	inset-inline-end: 100%;
+}
+
+.codex-editor--narrow .codex-editor__redactor {
+	margin-inline: 0;
 }
 
 .ce-toolbar__content {
@@ -570,8 +580,8 @@ usePageMeta(() => {
 	border-radius: 0 0 20px 2px;
 	padding: 2px 26px;
 	padding-top: 0;
-	padding-right: 0;
+	padding-inline-end: 0;
-	text-align: left;
+	text-align: start;
 	cursor: pointer;
 	border: none !important;
 	outline: none !important;
@@ -579,7 +589,7 @@ usePageMeta(() => {
 
 .codeBoxSelectDropIcon {
 	position: absolute !important;
-	left: 10px !important;
+	inset-inline-start: 10px !important;
 	bottom: 0 !important;
 	width: unset !important;
 	height: unset !important;
@@ -640,7 +650,7 @@ iframe {
 }
 
 .tc-table {
-	border-left: 1px solid #e8e8eb;
+	border-inline-start: 1px solid #e8e8eb;
 }
 
 .ce-toolbox__button[data-tool='markdown'] {
@@ -677,14 +687,13 @@ iframe {
 	padding: 8px;
 }
 
+.ce-popover,
 .codex-editor--narrow .ce-toolbox .ce-popover,
 .codex-editor--narrow .ce-toolbar__actions .ce-popover {
-	right: unset;
-	left: initial;
-}
-
-.ce-popover {
 	border-radius: 12px;
+	right: auto;
+	left: auto;
+	inset-inline-start: 0;
 }
 
 .cdx-search-field {
@@ -714,6 +723,11 @@ iframe {
 	height: 15px;
 }
 
+.ce-popover-item__icon {
+	margin-right: unset;
+	margin-inline-end: 10px;
+}
+
 .ce-popover--opened {
 	max-height: unset !important;
 }
@@ -724,7 +738,7 @@ iframe {
 }
 
 .cdx-search-field__icon {
-	margin-right: 5px;
+	margin-inline-end: 5px;
 }
 
 .cdx-block.embed-tool {