All Questions
153 questions
0
votes
2
answers
86
views
How can I remove the blue focus outline (ring) around my Slate.js editor?
import { Slate, Editable, withReact } from 'slate-react'
import { createEditor } from 'slate'
function MyEditor() {
const editor = useMemo(() => withReact(createEditor()), [])
return (
&...
- 7,391
0
votes
1
answer
111
views
Confusions about matching rules of slate `Editor.nodes()` function
I feel very confused about the matching rules of Editor.nodes(). This is my demo about slate in react project, and the UI is simple, only a "toggle bold" button can make text bold. The ...
- 460
0
votes
0
answers
23
views
slate is throw an error in the built Next project
TypeError: Cannot read properties of undefined (reading 'length')
at Object.compare (588-208df54dccab14d1.js:1:369316)
at Object.compare (588-208df54dccab14d1.js:1:387860)
at Object....
5
votes
1
answer
2k
views
Error: [Slate] initialValue is invalid! Expected a list of elements but got: undefined in React Slate Editor
I'm encountering an issue with my React Slate editor where I receive the following error:
Uncaught Error: [Slate] initialValue is invalid! Expected a list of elements but got: undefined
This error ...
1
vote
1
answer
219
views
Slate.js - trying and failing to update the text of a custom node using Transforms.setNodes
For example, I will have an editor.children layout like so:
[
{
type: 'paragraph',
children: [
{
text: 'A line of text!',
},
],
},
{
...
- 11
0
votes
1
answer
343
views
How do I insert a custom node into Slate editor text area and then automatically select the node. (select:true parameter doesn't work)
using
react 17.0.2
slate 0.61.1
slate-react 0.61.1
I have a function to insert a custom node into slate editor. After inserting the node, I want it to automatically be selected so that the user can ...
0
votes
0
answers
89
views
SlateJS image styling
I'm using SlateJS in my React project and I'm trying to put, in editor, an image with fixed width/height (600px/200px).
In this moment, when I click a button, the code insert the image:
const image = {...
1
vote
1
answer
911
views
How to automatically set focus to a SlateJS editor inside a react-hook-form
I am building a custom SlateJS editor to use in a form, utilising the react-hook-form <Controller> component.
This mostly works, but two things (I suspect are related) do not:
Focus activation ...
- 4,196
2
votes
1
answer
3k
views
onChange is not called when used with userEvent.type from React testing library
I am using RTL with Jest to test a Slate editor. I use .type to emulate a user typing into the editor and expect that Slate's onChange will be called. However, this does not happen.
Here's my editor ...
- 4,432
0
votes
1
answer
374
views
Updating an old link element by pasting a new link in slate.js
CodeSandbox Example:
https://codesandbox.io/s/slate-2-images-and-links-forked-5p6mom
I made a withLink() plugin that would automatically linkify a link text when a user pastes a link string into the ...
- 4,771
0
votes
1
answer
633
views
SlateJS: All void elements are deleted instead of the selected one
I tried recreating a simple mentions example here https://codesandbox.io/s/slatejs-poc-9j4f20?file=/src/App.tsx
The issue that I am facing is that, whenever I delete any void element, all of them are ...
2
votes
1
answer
1k
views
How to align text in Slate.js and React?
I'm building a rich text editor using React and Slate.js, and I'm trying to implement alignment functionality. However, the alignment buttons I've created don't seem to be working, and I'm not sure ...
- 179
1
vote
0
answers
153
views
TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'Node'
I'm trying coding follow this :
https://github.com/ianstormtaylor/slate/blob/main/site/examples/hovering-toolbar.tsx
IDE tips:
TS7053: Element implicitly has an 'any' type because expression of type '...
- 394
1
vote
1
answer
1k
views
How to ignore empty lines while wrapping nodes with SlateJS?
I'm using Slate.js to build a rich text editor. I set up an inline formatting that I can toggle with the following function:
toggleInline: function (editor, format) {
const isActive = this....
- 8,038
2
votes
2
answers
4k
views
How to clear all text in Slate.JS editor
For the life of me, I can't figure out how to clear all of the text in an Editor component from slate.js.
I have tried:
Transforms.delete(editor, {}); -> doesn't do anything
editor.deleteBackward(&...
1
vote
1
answer
681
views
ctrl + z, ctrl + y not working in slate.js editor
ctrl z not working in my slateJs editor, but it is working fine in slate example
<Slate editor={editor} value={initialValue}>
<Editable
renderElement={renderElement}
...
- 372
1
vote
0
answers
282
views
Slate React: cannot redefine element's text
I use Slate editor in my React app. I've created the custom inline tool called 'company'.
Once 'company' button is clicked current Company name is pasted on the current position;
Everything perfect ...
2
votes
0
answers
616
views
How to get slate indentation with increasing depth
how to get numbered list when Tab key press on slate editor currently i get only one numbered list ?
export const toggleBlock = (editor, format) => {
const isActive = isBlockActive(editor, format)...
- 193
0
votes
0
answers
620
views
SlateJS internal copy feature not working
Have been trying to build an open-source notion using #slatejs, not been able to find why the internal copy is not working on my editor.
Multiple selections also just shows the last element in ...
8
votes
1
answer
2k
views
Implement live markdown rendering using slate.js
I'm writing a markdown text editor using slate.js. I'm trying to implement the following live-rendering effect (from Typora):
As you can see,
When I'm typing, the text is turning to bold ...
- 27.9k
1
vote
1
answer
1k
views
Replace all PlateJS editor contents with another one
I've got pre-saved Nodes[] ([{ children: [{ text: 'bla' }] },{ children: [{ text: 'bla2' }] }]) and I want to replace current editor content with my pre-saved one, but programmatically (not using ...
- 439
1
vote
1
answer
377
views
How do I make a specific word uneditable in Slate.js?
I'm creating a rich text editor for my application. The content, is generated automatically from a template which may contain variables. What I am trying to achieve here is, I want to be able to make ...
- 59
5
votes
5
answers
7k
views
Set new intiial SlateJS editor value with React onEffect
How to easily set entire SlateJS editor value using React onEffect hook?
The initial editor value is set when creating the useState hook, however, I want to set a new initial value afterwards.
...
- 236
0
votes
1
answer
3k
views
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, ...
- 236
4
votes
1
answer
984
views
SlateJS apply bold to regex match
I am trying to apply bold to **text** in slatejs editor and so far my attempts have been unsuccessful.
I came across this answer which seems to be a possible solution to the problem.
However, after ...
- 1,155