fix(TextDirection): Add taskItem and blockquote to regarded node types

Also fix some CSS rules to work with rtl script.

Signed-off-by: Jonas <[email protected]>

Author: mejo-

src/css/prosemirror.scss

@@ -50,7 +50,7 @@ div.ProseMirror {
 		display: flex;
 		align-items: start;
 		// Leave space for checkbox (14px width + 2x 1px border + 6px margin-right)
-		margin-left: -24px;
+		margin-inline-start: -24px;
 
 		input[type=checkbox] {
 			display: none;
@@ -256,7 +256,7 @@ div.ProseMirror {
 
 	pre.frontmatter {
 		margin-bottom: 2em;
-		border-left: 4px solid var(--color-primary-element);
+		border-inline-start: 4px solid var(--color-primary-element);
 	}
 
 	pre.frontmatter::before {
@@ -274,7 +274,7 @@ div.ProseMirror {
 
 	li {
 		position: relative;
-		padding-left: 3px;
+		padding-inline-start: 3px;
 
 		p {
 			position: relative;
@@ -291,8 +291,8 @@ div.ProseMirror {
 	}
 
 	ul, ol {
-		padding-left: 10px;
-		margin-left: 10px;
+		padding-inline-start: 10px;
+		margin-inline-start: 10px;
 		margin-bottom: 1em;
 	}
 
@@ -311,11 +311,10 @@ div.ProseMirror {
 	}
 
 	blockquote {
-		padding-left: 1em;
-		border-left: 4px solid var(--color-primary-element);
+		padding-inline-start: 1em;
+		border-inline-start: 4px solid var(--color-primary-element);
 		color: var(--color-text-maxcontrast);
-		margin-left: 0;
-		margin-right: 0;
+		margin-inline: 0;
 	}
 
 	// table variables

src/extensions/RichText.js

@@ -117,7 +117,13 @@ export default Extension.create({
 				: null,
 			TrailingNode,
 			TextDirection.configure({
-				types: ['heading', 'paragraph', 'listItem', 'orderedList'],
+				types: [
+					'heading',
+					'paragraph',
+					'listItem',
+					'taskItem',
+					'blockquote',
+				],
 			}),
 		]
 		const additionalExtensionNames = this.options.extensions.map(e => e.name)

src/nodes/Callout.vue

@@ -50,12 +50,12 @@ export default {
 <style lang="scss" scoped>
 .callout {
 	background-color: var(--callout-background, var(--color-background-hover));
-	border-left-color: var(--callout-border, var(--color-primary-element));
+	border-inline-start-color: var(--callout-border, var(--color-primary-element));
 	border-radius: var(--border-radius);
 	padding: 1em;
-	padding-left: 0.5em;
-	border-left-width: 0.3em;
-	border-left-style: solid;
+	padding-inline-start: 0.5em;
+	border-inline-start-width: 0.3em;
+	border-inline-start-style: solid;
 	position: relative;
 	margin-bottom: 0.5em;
 
@@ -68,7 +68,7 @@ export default {
 	}
 
 	.callout__content {
-		margin-left: 1em;
+		margin-inline-start: 1em;
 		&:deep(p) {
 			&:last-child {
 				margin-bottom: 0;

src/tests/tiptap.spec.js

@@ -28,6 +28,6 @@ describe('TipTap', () => {
 
 	it('render taskList', () => {
 		const markdown = '* [ ] item 1\n'
-		expect(renderedHTML(markdown)).toEqual('<ul class="contains-task-list"><li data-checked="false" class="task-list-item checkbox-item"><input type="checkbox" class="" contenteditable="false"><label><p dir="ltr">item 1</p></label></li></ul>')
+		expect(renderedHTML(markdown)).toEqual('<ul class="contains-task-list"><li dir="ltr" data-checked="false" class="task-list-item checkbox-item"><input type="checkbox" class="" contenteditable="false"><label><p dir="ltr">item 1</p></label></li></ul>')
 	})
 })