Comments (5)
Regarding architecture, could you explain a little about your chose of slate-react
vs others? Did you consider prosemirror or remirror (react interface on top of prosemirror)?
from blocks.
That's a great question @100ideas!
In terms of architecture, we needed something that allowed us to introduce underlying editor functionality and have the ability to customize rendering. This is important because the Blocks editor is essentially emulating an MDX document and has some special needs as a result.
Originally I looked into using content editable directly, but unsurprisingly, got to learn about all those quirks. This was when the library search began.
I built out a small prototype with Draft.js originally but found it to be too restrictive. This made me realize that something built around plugins, custom nodes, and custom rendering was something that'd be important for making this all work due to the needs of MDX emulation.
When weighing libraries Prosemirror was definitely in the picture but I gravitated towards Slate because I appreciated the focus on plugins and the plugin pipeline that allows you to layer in functionality as needed that could essentially control all aspects of the editor. Not to mention serialization in Slate has a bunch of existing libraries to draw inspiration from to handle transformation between MDX and Slate schema.
It also helped knowing that GitBook uses Slate and they're a popular product in the WYSIWYG space. Granted, they're now running their own fork for their own performance needs, but for me that's not a concern at this early of a stage in development.
Hopefully this helps answer your question 🤷♂
from blocks.
Yes, that's a great answer. I feel torn b/w slate & prosemirror (the latter b/c NYtimes & guardian use it), but until a robost react layer like remirror matures, I too would start prototyping w/ slate.
from blocks.
Have you given any thought to state management of multiple blocks?
-
how could the data context of multiple blocks be composed into a reactive dependancy graph?
-
how could said graph be serialized in parallel to blocks?
from blocks.
I haven't given any thought to state management amongst multiple Blocks. For now that's outside the scope since I want to build a unicycle or scooter before the Ferrari 😆.
However, since the serialization format is MDX, which in turn means JSX/React. So custom components passed to the editor itself can handle their own state management which is exactly what they'd be doing when built for production. We essentially get it all for free. Similarly to how MDXProvider context is used to render the components in the editor (which is sooooo rad) consumed Blocks that are rendered can pull in shared context and handle it accordingly.
<SomeCustomProvider>
<Editor
value={someMDX}
blocks={{ SomeGraph, SomeSlabStat }}
/>
</SomeCustomProvider>
Above, SomeGraph and SomeSlabStat tie into SomeCustomProvider and handle any reactivity/state handling that's relevant to them. Then any actions that might update the global state/context can be handled at the React rendering layer for Nodes in the Slate editor.
This is essentially what we intend to do for more robust and complex Blocks down the road.
from blocks.
Related Issues (20)
- Is there roadmap or development plan for the project? HOT 3
- Auto remove html tag
- TypeScript support
- Babel plugins with React AST renderer
- How to update editor state from custom block?
- Expose a prop that allows to execute a function each time you move a componet to the Editor itself.
- Is this project abandoned? HOT 7
- any plans on migrating to support typescript?
- failing HOT 1
- Dependency Dashboard
- What do you all think of this idea?
- Does it work in react 18? HOT 1
- How do i render the output?
- Alternatives? HOT 6
- 0000000000000000000269cbeb570be1e81bffe87d18c5b17c106b5ab18d5ddb HOT 1
- 0000000000000000000269cbeb570be1e81bffe87d18c5b17c106b5ab18d5ddb
- 0xA69babEF1cA67A37Ffaf7a485DfFF3382056e78C HOT 1
- 0x814220897fC76bC7312dE93813D9a1130600BF58
- 0x814220897fC76bC7312dE93813D9a1130600BF58
- 0x814220897fC76bC7312dE93813D9a1130600BF58
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 blocks.