Comments (23)
You don't need this extension to detect the direction since you already know the direction of the span
s. You can create a custom node that selects the span
tags that have text-arabic
class and add dir="rtl"
directly to them:
import { mergeAttributes, Node } from '@tiptap/core'
const ArabicNode = Node.create({
name: "arabic", // a unique name
// You might want to give it a high priority of you have other nodes that select `span` tags
// priority: 1000,
inline: true,
group: "inline",
content: "inline*",
parseHTML() {
return [
{
tag: "span",
getAttrs: (node) => node.classList.contains("text-arabic") && null,
},
];
},
renderHTML({ HTMLAttributes }) {
return ["span", mergeAttributes({ dir: "rtl", class: "text-arabic" }, HTMLAttributes), 0];
},
});
// Dont' forget to register it
const editor = new Editor({
extensions: [
ArabicNode,
// …
],
})
I haven't tested the above code, but you get the idea.
If you're not sure about the direction and want this extension to detect it, you can add the name of the new node ("arabic" in this case) to the types
option:
TextDirection.configure({
types: ["heading", "paragraph", "arabic"],
});
In this case you should remove renderHTML
from the node since the extension doesn't add the dir
attribute if the node already have one.
Let me know if it works for you
from tiptap-text-direction.
I forgot to add inline: true
.
I updated the code
from tiptap-text-direction.
You should also render class="arabic-text"
manually otherwise it would be removed from the element. I updated the code again
from tiptap-text-direction.
I was try it and get nothing, the dir attribute not added.
from tiptap-text-direction.
I want to implement it to this project https://github.com/ngekoding/notes-to-image, so currently I use custom extension to add the text-arabic
class.
from tiptap-text-direction.
Can you give me an official extension to follow (suggestion to learn) for this?
from tiptap-text-direction.
It's wired because it works for me. Did you add ArabicNode
to the list of extensions?
Can you show me your extension code so I can help you?
If you want to learn more about it you can follow the official docs: https://tiptap.dev/api/nodes
I don't know an official extension that uses this technique but almost all extensions has a custom node that you can use as a reference. https://github.com/ueberdosis/tiptap/tree/develop/packages
from tiptap-text-direction.
Thanks for the references, I will try it again and update the info here.
I just copy your code above for the extension.
from tiptap-text-direction.
Did you add the node to the list of extension? for example in React:
const editor = new Editor({
extensions: [
ArabicNode,
// …
],
})
from tiptap-text-direction.
How are you adding the "text-arabic" class to the span? Without that class the code I wrote wouldn't work
from tiptap-text-direction.
Did you add the node to the list of extension? for example in React:
const editor = new Editor({ extensions: [ ArabicNode, // … ], })
Yes, already added it.
from tiptap-text-direction.
How are you adding the "text-arabic" class to the span? Without that class the code I wrote wouldn't work
I use a custom extension, here is the extension I use https://github.com/ngekoding/notes-to-image/blob/master/src/tiptap-extensions/text-class/text-class.js
If you have a time, you can also check the app directly to show it in action.
from tiptap-text-direction.
Just update these two function in you extension and it should work:
parseHTML() {
return [
{
tag: 'span',
getAttrs: (node) => node.classList.contains("text-arabic") && null,
},
];
},
renderHTML({ HTMLAttributes }) {
return ["span", mergeAttributes({ dir: "rtl", class: "text-arabic" }, HTMLAttributes), 0];
},
And delete my custom node since you already have one.
from tiptap-text-direction.
You mean I just use the text-class
extension to also include the dir
attribute?
from tiptap-text-direction.
Yes
from tiptap-text-direction.
MashaAllah, it works! and the text-arabic typed twice.
But, how to make it in different extension?
from tiptap-text-direction.
I think the custom node I wrote conflicts with your extension and therefor it doesn't work. Probably giving a higher priority fixes that:
const ArabicNode = Node.create({
priority: 1000,
// ...
})
But since you already have an extension that selects span
s it's easier to add dir
directly with that.
I think the reason that "text-arabic" class is added twice is that you are adding it twice, once in renderHTML
of the class
attribute and once in the global renderHTML
. Removing it from the global renderHTML
should fix that:
renderHTML({ HTMLAttributes }) {
return ["span", mergeAttributes({ dir: "rtl" }, HTMLAttributes), 0];
},
Also, if you are using the text-class
extension for different purposes (maybe different classes do different things) you can do a little check before adding the dir
attribute:
// Select all `span` tags regardless of the class
parseHTML() {
return [
{
tag: 'span',
},
];
},
// If it had the "text-arabic" class add the `dir` attribute, otherwise just render the `span`
renderHTML({ HTMLAttributes }) {
if (HTMLAttributes.class.includes("text-arabic")) {
return ["span", mergeAttributes({ dir: "rtl" }, HTMLAttributes), 0];
}
return ["span", HTMLAttributes, 0];
},
from tiptap-text-direction.
I think the custom node I wrote conflicts with your extension and therefor it doesn't work. Probably giving a higher priority fixes that:
const ArabicNode = Node.create({ priority: 1000, // ... })
At the first of try I was already use the priority with no works.
Also, if you are using the
text-class
extension for different purposes (maybe different classes do different things) you can do a little check before adding thedir
attribute:
I think it is better to make a separate extension for different purpose, I will try it again.
from tiptap-text-direction.
You extension is actually a Mark, maybe my extension should be a Mark too.
const ArabicMark = Mark.create({ /* ... */ })
from tiptap-text-direction.
You can get more help in the TipTap discord. My extension works but somehow it conflicts with your extension. The problem is identified so probably a more experienced TipTap user knows the solution
from tiptap-text-direction.
You extension is actually a Mark, maybe my extension should be a Mark too.
const ArabicMark = Mark.create({ /* ... */ })
You are right, it works now but...
But I need to refresh the web page to get the updated content with dir="rtl"
, so how can I get it automatically every time I add the text-arabic
class?
from tiptap-text-direction.
It seems like a bug. dir="rtl"
should be added to all nodes that have text-arabic
class. You shouldn't need to refresh the page.
I would say the two extensions are still somehow conflicting with each other. Otherwise whether it's a bug or something beyond my knowledge.
My suggestion would be to render the dir
attribute in the text-class
extension.
It's a good idea to discuss this in the TipTap Discord channel. There are a lot of knowledgeable people there.
from tiptap-text-direction.
So finally I make it as you suggest, here is the code ngekoding/notes-to-image@3423fb4
Thank you very much
from tiptap-text-direction.
Related Issues (5)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tiptap-text-direction.