Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Additional extensions, also as examples on how to extend even further #634

Closed
onyx-blackbird opened this issue Mar 17, 2020 · 3 comments
Closed
Labels
Type: Feature The issue or pullrequest is a new feature

Comments

@onyx-blackbird
Copy link

Is your feature request related to a problem? Please describe.
Some basic features of an RTE are missing and you have to implement them yourself. Some seem easy but need good understanding of the ProseMirror API and some additional examples would help to create more complex cases which are then really something very use case specific.

Describe the solution you'd like
One feature I'm trying to implement and struggling with the API is text-align for paragraphs.
I would put the cursor somewhere within a paragraph and then select its alignment.

Additional context
rte

If someone can provide a way to do this even if it doesn't make it into the default extensions, I'd appreciate it.

@onyx-blackbird onyx-blackbird added the Type: Feature The issue or pullrequest is a new feature label Mar 17, 2020
@onyx-blackbird
Copy link
Author

After almost a day of try and error and looking at some ProseMirror JavaScript code, I found a working solution (mostly struggling with content and group). This is just the right alignment one, but center and justify are almost the same, and maybe it would be possible to have it generic in one, but as I said, I am new to this API:

import { Node } from 'tiptap';
import { toggleBlockType } from 'tiptap-commands';

export default class AlignRight extends Node {

	get name(): string {
		return 'align_right';
	}

	get schema() {
		return {
			content: 'inline*',
			group: 'block',
			defining: true,
			draggable: false,
			parseDOM: [
				{
					tag: 'p',
					style: 'text-align=right',
				},
			],
			toDOM: () => ['p', {style: 'text-align: right;'}, 0],
		}
	}

	public commands({ type, schema }: any) {
		return () => toggleBlockType(type, schema.nodes.paragraph);
	}

}

@Leecason
Copy link
Contributor

you can see this pr #544 and the comment #544 (comment)

@hanspagel
Copy link
Contributor

Thanks @onyx-blackbird! We’ve added a TextAlign extension to the upcoming tiptap v2. And there will be a huuuge documentation for v2 with a lot of examples. 👍 I’m closing this here already.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Feature The issue or pullrequest is a new feature
Projects
None yet
Development

No branches or pull requests

3 participants