Stack Overflow
Stack Overflow

Questions tagged [slatejs]

Slate is a customizable JavaScript framework for creating rich text editors.

96 questions
11
votes
1 answer

TypeError: Text.isText is not a function

I'm following a slate tutorial on https://docs.slatejs.org/walkthroughs/04-applying-custom-formatting There is a function call Text.isText(n), I keep getting Type:Error Text.isText is not a function toggleBoldMark(editor) { const isActive =…
gurpartap
  • 375
  • 2
  • 9
10
votes
2 answers

How to set selection after Transforms.insertNodes() in Slate JS

I am trying to add a new line right below current selection, then put the selection to the new line. let current_path = props.selection.anchor.path[0] Transforms.insertNodes(editor, {type:'line', children:[{ text:'' }]},{at:…
Yuqin Xu
  • 187
  • 1
  • 7
10
votes
2 answers

In SlateJS, how to change focus to specific editor when multiple editors are present?

I have multiple SlateJS editors in my app, representing individual pages. When I add a new page, I want the focus to be changed to the editor within that page. I have no idea how to do this! I've checked in the docs and there are onFocus and onBlur…
haz
  • 2,034
  • 4
  • 28
  • 52
8
votes
3 answers

Caret position and selection height for inline elements in Chrome

I'm looking into building an editor with Slate or ProseMirror and seeing some strange behavior with Chrome around the caret position and selection area when using an inline element. Issue 1 is shown in the first picture below. When the text cursor…
mowwwalker
  • 16,634
  • 25
  • 104
  • 157
8
votes
1 answer

In Slate.js editor.apply(operation) is not applying "split_node" operations correctly

I am designing a google-doc like collaborative tool with latest React + Slate as Frontend and Flask in Backend. I am using socket-io in React and flask_socketio in Python to emit and listen content from other collaborators. React app code: const…
HoneyBeer
  • 432
  • 6
  • 14
8
votes
1 answer

SlateJS: slate-core Editor not updating value for simulated onKeyDown events

I'm attempting to simulate onKeyDown events on the Editor from slate-core -- as opposed to slate-react -- to test some plugins I am developing. However, the Editor is not updating its Value whatsoever. I've extensively looked through the SlateJS…
devinm
  • 755
  • 1
  • 7
  • 17
6
votes
1 answer

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 automatically. When I hit the space key, the four asterisks…
Searene
  • 25,920
  • 39
  • 129
  • 186
6
votes
3 answers

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. Currently, we can do that by deleting all elements with…
wanna_coder101
  • 508
  • 5
  • 19
6
votes
1 answer

Best way to convert SlateJs to pdf

I don't know if is the best way, but i trying to converte slate js to pdf using jspdf. o realized that it is not easy. convert slate js 'Value' to jspdf can be very complicate. someone know if there is some other way to converte slate js to pdf, a…
Edison Junior
  • 320
  • 1
  • 6
6
votes
2 answers

How to test Slate JS behavior in Cypress

How can I insert text in a Slate editor with Cypress? The Slate onChange handler doesn't seem to be called while typing with cy.type() or cy.clear().
reydelo
  • 156
  • 10
5
votes
2 answers

Slate.js throws an error when inserting a new node at selected region

Relevant code blocks: { setValue(value); const { selection } = editor; // if nothing is currently selected under the cursor if…
James Harrison
  • 323
  • 4
  • 12
5
votes
1 answer

How to test `contenteditable` events with React Testing Library

I am trying to write tests for one of our rich text components which was implemented with slate js editor in react js. So when writing tests, I am retrieveing the element div[contenteditable='true'], but not able to simulate events like change,…
Rekha
  • 325
  • 1
  • 9
5
votes
1 answer

get copied content inside onCopy hook (plugin)

I am trying to get copied fragment into onCopy hook vainly. I've been trying with the event.clipboardData... const { clipboardData } = event; const encoded = clipboardData.getData("application/x-slate-fragment"); But it seems as empty. I have also…
Apeiron
  • 1,881
  • 2
  • 13
  • 21
5
votes
3 answers

Detecting which node is selected within a slate-react text editor

I am currently working on a slate text editor where the user can add images and text. I would also like to have a hovering toolbar which serves different buttons depending on what type of element the user has selected. For example if the user has…
Conor Heena
  • 86
  • 1
  • 2
  • 13
5
votes
2 answers

slate.js based reactjs rich text editor reverse engineering

it all started from watching two slate.js demo videos in youtube https://www.youtube.com/watch?v=8K-qYdOPKT4 https://www.youtube.com/watch?v=BMID1FbEZSk&t=3s His name is Andrei Fiodorov and he showed in those demos how his rich text editor works…
coolsaint
  • 1,291
  • 2
  • 16
  • 27
1
2 3 4 5 6 7