Merge pull request #1191 from ahangarha/add-bidi-support

Add bidi support

Author: juliusknorr

css/notes.css

@@ -28,20 +28,28 @@ li:focus  .app-navigation-entry__utils .action-item {
 
 /* Welcome / Help */
 .feature {
-	background-position: left center;
+	background-position-y: center;
 	width: 100%;
 	min-height: 32px;
 	line-height: 32px;
-	padding-left: 32px;
+	padding-inline-start: 32px;
 	margin-top: 0.3em !important;
 	margin-bottom: 0.3em !important;
 	display: inline-block;
 	vertical-align: middle;
 }
 
+body[dir='ltr'] .feature {
+	background-position-x: left;
+}
+
+body[dir='rtl'] .feature {
+	background-position-x: right;
+}
+
 .feature ul {
 	list-style: circle outside;
-	padding-left: 2em;
+	padding-inline-start: 2em;
 }
 
 
@@ -66,6 +74,6 @@ li:focus  .app-navigation-entry__utils .action-item {
 	}
 
 	.app-content {
-		margin-left: 0 !important;
+		margin-inline-start: 0 !important;
 	}
 }

package-lock.json

@@ -23,6 +23,7 @@
     "diff": "^5.1.0",
     "easymde": "^2.18.0",
     "markdown-it": "^13.0.2",
+    "markdown-it-bidi": "^0.1.0",
     "markdown-it-task-checkbox": "^1.0.6",
     "vue": "^2.7.16",
     "vue-fragment": "^1.6.0",
@@ -46,4 +47,4 @@
     "extends @nextcloud/browserslist-config"
   ],
   "version": "4.9.1"
-}
+}

package.json

@@ -317,9 +317,9 @@ export default {
 	padding-top: 0 !important;
 	// Prevent shrinking or growing
 	flex: 0 0 auto;
-	padding-right: 3px;
+	padding-inline-end: 3px;
 	padding-bottom: 3px;
-	padding-left: 3px;
+	padding-inline-start: 3px;
 	margin: 0 3px;
 }
 </style>

src/App.vue

@@ -354,7 +354,7 @@ export default {
 	border-radius: var(--border-radius);
 	background-position: center;
 	margin-top: 5px;
-	margin-left: 2px;
+	margin-inline-start: 2px;
 }
 
 .CodeMirror .cm-formatting-task.cm-property::before {
@@ -370,10 +370,10 @@ export default {
 
 .upload-button {
 	position: fixed;
-	right: 64px;
+	inset-inline-end: 64px;
 	z-index: 10;
 	height: 40px;
-	margin-right: 5px;
+	margin-inline-end: 5px;
 	top: 65px;
 }
 </style>

src/components/EditorEasyMDE.vue

@@ -37,6 +37,8 @@ export default {
 			liClass: 'task-list-item',
 		})
 
+		md.use(require('markdown-it-bidi'))
+
 		return {
 			html: '',
 			md,
@@ -196,7 +198,7 @@ export default {
 	}
 
 	& ul, & ol {
-		margin-left: 3ex;
+		margin-inline-start: 3ex;
 	}
 
 	& li > p, & li > ul, & li > ol {
@@ -220,8 +222,8 @@ export default {
 
 	& blockquote {
 		font-style: italic;
-		border-left: 4px solid var(--color-border);
-		padding-left: 2ex;
+		border-inline-start: 4px solid var(--color-border);
+		padding-inline-start: 2ex;
 		color: var(--color-text-light)
 	}
 
@@ -263,8 +265,8 @@ export default {
 	.download-icon-inner {
 		height: 3em;
 		width: auto;
-		margin-left: auto;
-		margin-right: auto;
+		margin-inline-start: auto;
+		margin-inline-end: auto;
 		margin-bottom: 5px;
 	}
 
@@ -281,7 +283,7 @@ export default {
 
 	& table td, & table th {
 		padding: 0.35em 0.5em;
-		text-align: left;
+		text-align: start;
 		border: 1px solid var(--color-border);
 	}
 

src/components/EditorMarkdownIt.vue

@@ -56,15 +56,19 @@ export default {
 <style scoped>
 .badge-wrapper {
 	margin-top: 2em;
-	margin-left: 2em;
+	margin-inline-start: 2em;
 	width: 100%;
 	clear:both;
 }
 
-.badge {
+body[dir='ltr'] .badge {
 	float: left;
 }
 
+body[dir='rtl'] .badge {
+	float: right;
+}
+
 .appstore-badge {
 	height: 72px;
 	box-sizing: border-box;

src/components/HelpMobile.vue

@@ -66,7 +66,7 @@ export default {
 	margin-top: 24px;
 
 	button {
-		margin-left: 12px;
+		margin-inline-start: 12px;
 	}
 }
 </style>

src/components/Modal/EditorHint.vue

@@ -438,9 +438,9 @@ export default {
 		margin: 0 auto;
 	}
 	.note-container {
-		padding-right: 250px;
+		padding-inline-end: 250px;
 		transition-duration: var(--animation-quick);
-		transition-property: padding-right;
+		transition-property: padding-inline-end;
 	}
 }
 
@@ -467,7 +467,7 @@ export default {
 .action-buttons {
 	position: fixed;
 	top: 50px;
-	right: 20px;
+	inset-inline-end: 20px;
 	width: 44px;
 	margin-top: 1em;
 	z-index: 2000;

src/components/NotePlain.vue

@@ -196,7 +196,7 @@ export default {
 
 .is-mobile:deep(.text-menubar) {
 	// Avoid overlapping the navigation toggle
-	margin-left: 44px;
+	margin-inline-start: 44px;
 	z-index: 1;
 }
 </style>