Comments (14)
I just submitted a PR for this: #356
from react-rte.
I've thought about this but not implemented anything yet. The problem is two-fold:
- I need to store the align value on the block but there is not currently any way to attach meta data on blocks (that is being addressed in facebookarchive/draft-js#216)
- There is not really any semantic equivalent for this in HTML/Markdown. Technically, there's
<center>
in HTML but it's not wise to use it and there's nothing for left/right
Most similar editors tend to use <p style="text-align: right">
(and similar with h1
, etc).
I am OK with this if we can get item 1 solved with the block meta-data. I think I'll wait for that to land first.
from react-rte.
The first item above about Metadata for ContentBlock objects has landed in draft-js v0.8 so that unblocks this issue and puts in on my near-term roadmap.
The issue remains: how to represent the alignment in HTML or Markdown. In HTML we can use an inline style for now.
Ultimately, my plan for that is to let you, the implementor, define that behavior when you add react-rte to your project. You should be able to pass some function as a prop (which will then be passed to draft-js-export-html and draft-js-eport-markdown, etc). The default might be to add style="text-align: center"
to the HTML but maybe you want to wrap it in a <center>
or something. Totally customizable.
from react-rte.
@sstur the feature Ryan Anderson @andersryanc had build is really usefully, do you think you can take a look at his code and integrate that into your repo? Thanks a bunch, we are using this for a CMS and is working out great for us, thanks so much for all your input!
from react-rte.
@sstur could you provide an example or something as a starting point for me on how to do this customization?
This feature is crucial in the project i'm working on
from react-rte.
Is there any update on when text-alignment will be supported?
from react-rte.
Any chance there's an update on text-alignment? Thanks so much!
from react-rte.
I would love to see this feature too! Happy to help implement if you give me some pointers of where to start...
from react-rte.
In an effort to try and help push this task forward, I created some code (link above). Let me know if this is the right direction. I'm happy to make any necessary adjustments to get this merged into the project! As @sstur mentioned wanting to save this alignment data as part of the block metadata, I did that. That being said, I'm not sure that piece of it is 100% correct, as I was having a hard time finding out much information about how that's meant to be used in the Draft JS docs.
Here is what it looks like though in the local dev environment:
As you may notice in this GIF, one last piece I need to figure out is how to style the text in the editor itself...
from react-rte.
I made a few additional improvements (mostly to fix the alignment inside the editor). You should see the compare page for my branch, instead of just the referenced commit above:
master...andersryanc:feature/block-level-text-align
from react-rte.
A couple more improvements:
-
Added
react
andreact-dom
to devDependencies (since the project doesn't really work without them being installed and they are only peerDeps right now). -
Changed
prepublish
script toprepare
(so I could install the package directly from GitHub for testing... npm builds it locally during the install if you use that) -
Added my custom
blockStyleFn
s (which are used in the demo) to the main package's exports so I could use them in my own project... if you'd rather, I could just rip those out and copy them to my project, but figured people would probably want a default behavior exposed for this sort of thing. It might be nice to even have it do this automatically without you needing to import those and apply them again as the implementor. This one is somewhat related to your comment above:Ultimately, my plan for that is to let you, the implementor, define that behavior when you add react-rte to your project.
from react-rte.
@andersryanc Hi! I was just wondering if this is also valid for the markdown functionality? I don't see any changes on the markdown and since that's what I'm saving into my DB, every time I load the data the alignments are lost... Could I be missing something? Or this was just an solution for HTML exporting?
Thanks
from react-rte.
Sorry, no, I did not test Markdown.
from react-rte.
I just submitted a PR for this: #356
it helped me A LOT. thanks!
from react-rte.
Related Issues (20)
- Appending custom html in the editor
- Warning: componentWillUpdate has been renamed HOT 2
- read the length of value
- How can I update the paste value while pasting it on rich text editor.
- converting between HTML and MD
- Is there any documentation for this?
- Add React 18.x.x HOT 4
- Show URL link on links hover
- Autofocus not working as expected with React hook forms
- How to get WYSIWYG when images are used
- Many newlines causes editor to go into an infinite loop
- Command for new line
- Size of the bullet points has not changed along with texts font sizes
- Not working on JSX
- Jumping cursor on mobile HOT 1
- ReferenceError: window is not defined HOT 1
- Window is not defined error when run from Next HOT 2
- react-rte dependency issue with [email protected] HOT 2
- Not working react-rte HOT 2
- While adding an empty link in popover, it redirects to home url when clicked
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 react-rte.