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

@@ -51,7 +51,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;
@@ -262,7 +262,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 {
@@ -280,7 +280,7 @@ div.ProseMirror {
 
 	li {
 		position: relative;
-		padding-left: 3px;
+		padding-inline-start: 3px;
 
 		p {
 			position: relative;
@@ -298,8 +298,8 @@ div.ProseMirror {
 
 	ul,
 	ol {
-		padding-left: 10px;
-		margin-left: 10px;
+		padding-inline-start: 10px;
+		margin-inline-start: 10px;
 		margin-bottom: 1em;
 	}
 
@@ -318,11 +318,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

@@ -120,7 +120,13 @@ export default Extension.create({
 			LinkBubble,
 			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

@@ -51,12 +51,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;
 
@@ -69,7 +69,7 @@ export default {
 	}
 
 	.callout__content {
-		margin-left: 1em;
+		margin-inline-start: 1em;
 		&:deep(p) {
 			&:last-child {
 				margin-bottom: 0;

src/tests/tiptap.spec.js

@@ -31,7 +31,7 @@ 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>',
+			'<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>',
 		)
 	})
 })