Slate is a customizable JavaScript framework for creating rich text editors.
Questions tagged [slatejs]
96 questions
1
vote
1 answer
SlateJs RenderMark in more than one plugin
I am using renderMark in multiple plugins, but only the top plugin in the plugin stack gets called, the remaining are ignored.
// first plugin
function MarkHotkey(options) {
const { type, key, RenderTag, icon } = options
return {
…
DurGesh kuMar RAO
- 284
- 4
- 13
1
vote
2 answers
Expanding selection to the current word with SlateJS
With Slatejs (v0.47) how do I expand the current selection (starting off collapsed) to encompass the current word?
So (assuming [] indicates the current section)
If I start of with
this is some te[]xt
How do I programmatically expand the selection…
SColvin
- 11,584
- 6
- 57
- 71
1
vote
1 answer
slate js: how to highlight neighbour components with the same mark on hover?
// utility hook
function useMouseOver() {
const [mouseOver, setMouseOver] = useState(false);
return {
mouseOver,
triggers: {
onMouseEnter: () => setMouseOver(true),
onMouseLeave: () => setMouseOver(false),
},
};
}
//…
aiven
- 3,775
- 3
- 27
- 52
1
vote
0 answers
I need a way of adding multiple tags with styling to text whilst keep track of its position in a html text area
It's a bit tricky to explain, but I need to produce a React component where the user can select text and apply a "tag" to the text which will make the text bold. I need to record the position of the tags as this data needs to be stored and used in…
lkbrandbank
- 11
- 4
1
vote
0 answers
Get multiple occurrences of an inline block in Slate js having inline block at first place
I have an inline-block node value. With this node value, I would like to get multiple occurrences of it in the editor.
vam
- 492
- 7
- 17
1
vote
1 answer
SlateJS + redux
I want to store a SlateJS editor's value stored in redux instead of in state, but I when I change the hasLinks method, I immediately receive a crash stating:
TypeError: Cannot read property 'inlines' of undefined
Editor's hasLinks Method
hasLinks…
Rbar
- 3,740
- 9
- 39
- 69
1
vote
1 answer
Is there a way to update a Slate change after the current change completes?
Basically I want to make inlines that can be updated from the end if the cursor/selection is there. However it seems to be overriding changes like deleting from the end an inline.
I was attempting to do something like this (with guidance from…
Martin
- 21
- 1
- 4
1
vote
1 answer
Setting up Slate.js
I am trying to set up a simple slate.js editor, with the following code:
import { Editor } from 'slate-react'
import { Value } from 'slate'
const initialValue = Value.fromJSON({
document: {
nodes: [
{
object: 'block',
type: 'paragraph',
…
jjuser19jj
- 1,637
- 3
- 20
- 38
0
votes
1 answer
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 deleted.
Vivek Kumar Bansal
- 246
- 2
- 7
0
votes
1 answer
Create a temporary visual effect when insertNode on on react-slate
I allow our users to select snippets of text to insert into the Slate editor from a list of text items. To do so I use Transforms.insertNodes(editor, texts) which works perfectly.
The insertion can be abrupt though, from a UX perspective. Especially…
Sean
- 2,412
- 3
- 25
- 31
0
votes
1 answer
How to pass events in the SLATEJS rich text editor
I'm trying coding follow this doc:
https://docs.slatejs.org/walkthroughs/05-executing-commands
I just wanted to make it elegant, so I tried to separate the Toolbar Button into other files. But how do I pass the event onKeydown there?
I tried the…
HappyKoala
- 191
- 1
- 11
0
votes
1 answer
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.isFormatActive(editor, format, TYPES.FORMATS.INLINE);
…
Arkellys
- 5,562
- 2
- 16
- 40
0
votes
1 answer
How to focus to a block when cursor at start of line with Slate JS?
I am using Slate JS.
I have some code, which should focus a given block (move the cursor there).
The use case here is: press / to open a modal, then when the modal closes, we want to refocus to the block we were at before.
To do this, we use…
Colin Ricardo
- 16,488
- 11
- 47
- 80
0
votes
0 answers
SlateJS React trying to get a textfield to work inside an Element
I have a Slate element that looks like this:
import React, {useState} from 'react'
import "./App.css"
export default function Accordion(props) {
const [closed, setClosed] = useState(false) //todo eventually fetch starting…
Johannes K
- 5
- 1
0
votes
0 answers
SlateJS - Split lists into two lists
I had added this to make it so that a user would break out of a list upon hitting enter twice in a row. In other words, the intent was just to return back to root level, after list, in a new paragraph, in the case that a user had hit enter, 1st…
Neil Gaetano Lindberg
- 2,488
- 26
- 23