Slate is a customizable JavaScript framework for creating rich text editors.
Questions tagged [slatejs]
96 questions
0
votes
2 answers
Insert tab character into SlateJS text editor
How to insert tab characters into SlateJS?
So inserting is a tab character, however, when inserting this as text, it appears as the literal characters not the text with a tab spacing.
// Don't work, inserts literal characters
const…
wanna_coder101
- 508
- 5
- 19
0
votes
1 answer
Is there a way to trigger an event when you backspace and delete an image using slate.js?
I am using slate.js and when I delete an image by pressing backspace the image is removed from state and no longer exists. However, with the image still being stored on the server. I would like to trigger an event to delete the image from the…
coder5666666666
- 37
- 5
0
votes
1 answer
How to Inject new element in SlateJS Editor DOM
How to inject new react component/element into SlateJS Editor DOM?
I want to inject a new element within the SlateJS editor's DOM, not above or below.
Most of SlateJS's examples would transform nodes, but it doesn't allow for direct injecting into…
wanna_coder101
- 508
- 5
- 19
0
votes
1 answer
Slatejs reset element type after line-break
I'm working with slatejs ,and I want to know :
If my current Element.type is title , looks like ,
but when I click enter, it will create a new
tag. If I want the line-break after title type and the new element type will become…
Wen
- 1
0
votes
2 answers
How to create a hyperlink insertion modal without losing text selection?
I've got a React site which uses Slate-React (https://docs.slatejs.org/libraries/slate-react) to create a rich text input field. Slate uses the browser's prompt() function to apply hyperlinks to selected text, but I need to be able to style the…
Dorian Fabre
- 469
- 1
- 7
- 20
0
votes
1 answer
how to color specific keywords in slate js
Trying to get the word "hello" to appear in different color, using almost 1:1 the example from the examples, but can't get it to work.
Whenever I type "hello" the text starts to appear twice as I write.
My code:
import { Editable, Slate, withReact }…
Uri
- 25,622
- 10
- 45
- 72
0
votes
1 answer
Cant select text, cant position caret in Firefox - Slatejs
Description
Slatejs editor only in Firefox fails with text selection and caret positioning (by mouse). It always selects position before first character (path[0] offset[0]).
You can still use the keyboard to select text and position…
Alan Jereb
- 154
- 2
- 12
0
votes
0 answers
Using Debut's slate to create a popup cart
I'm trying to use slate's _hideCartPopup and _showCartPopup to respond to onclick on the cart's anchor tag. I'm using the latest debut theme.
tried with this but I'm having error..
var siteheadercar = document.querySelector('.site-header__cart');
…
Christian Young
- 543
- 3
- 8
- 19
0
votes
2 answers
Slatejs editor.selection returns null on popovers?
I created a slatejs rich text editor with voids, but I have a problem which is I can't get the current selection while I am doing actions inside the popover. However, I recreated the problem here on sandbox.
additional info
if you need to know why…
Ali Husham
- 816
- 10
- 31
0
votes
1 answer
Problem to add a new block right after the current one
I'm trying to add a new block right after the block where the cursor is located / where I click on a button.
My questions are:
How can I determine the path for the current block?
Which method can I use to add a block after? I use insertNode but you…
Thierry Templier
- 198,364
- 44
- 396
- 360
0
votes
1 answer
Is there any way to avoid loading npm packages on pageload of React application
I am using few big sized npm packages (slate.js) in my project. The problem is, slate (and other npm packages) is automatically loaded on page load, even its only used inside a lazy-loaded component.
I am trying to avoid loading on pageload slate…
Onur Özkan
- 918
- 1
- 10
- 20
0
votes
1 answer
How to add Slate node in particular empty space without selection?
Assume I have to add some custom element to Slatejs document by clicking toolbar outside the editor. It triggers Transform.insertNodes but instead of add element in place of cursor (which disappeared on click on toolbar and lost selection) it puts…
Sheppard25
- 493
- 1
- 7
- 22
0
votes
2 answers
What is the following code snippet from a slate.js example doing?
I am trying to understand Slate.js by looking through the rich text example, and I came across the following snippet of code, which I do not understand.
const isBlockActive = (editor, format) => {
const [match] = Editor.nodes(editor, {
…
wanderingmathematician
- 143
- 1
- 7
0
votes
1 answer
Access the references of children from the parent component on first render
This is driving me nuts. I have a use case where I insert a node in one editor and it should insert the node in the subsequent editors. I am rendering the components only when they are clicked so if I go with the traditional way of…
vam
- 492
- 7
- 17
0
votes
1 answer
How to convert Slate JS hover menu to React Hooks?
Slate JS provides an example of a pretty slick hover menu based on a traditional Class component. My goal is to convert this for use with React Hooks. I think I'm 95% of the way there, but I'm hung up on how to pass certain props from the Editor…
Kwhitejr
- 2,206
- 5
- 29
- 49