* add basePath prop to Range inside slate-react custom types, calculate absolute ranges on passing them into TextComponent
* code highlighting example improvements, minor markdown preview refactoring
* changeset added
* Revert "add basePath prop to Range inside slate-react custom types, calculate absolute ranges on passing them into TextComponent"
This reverts commit afa085c289bc67ce3d27dd33b1f074ab8153efe8.
* add basePath prop to Point inside slate-react custom types, resolve relative ranges on passing them to TextComponent
* Update changeset
* linter fixes
* remove redundant checks inside renderElement function
* custom types fixes for Range and Point in examples
* wrap intervals and ranges extractors in useMemo hook for running them only if editor.children is changed
* revert basePath changes, compare only offsets for MemoizedText decorations
* use an element as a key in decorations ranges map instead of id
* simplify code highlighting implementation, make code block nested
* fix code-highlighting example, add toolbar code block button
* remove redundant code
* fix code highlighting playwright integration test
* Switch back to using inline styles for default editor styles
* Add example page and test for editor styling
* Add section in docs for editor styling
* Add test for editor height being set to placeholder height
* Add changeset
Some void elements are effectively stand-ins for text, such as with the mentions example,
where the mention element renders the character's name. Users might want to format Void
elements like this with bold, or set their font and size, so `editor.markableVoid` tells
Slate whether or not to apply Marks to the text children of void elements.
- Adds `markableVoid()` as a schema-specific overrideable test.
- Changes `addMark` and `removeMark` so marks can apply to voids. Also changes behavior
of collapsed selection so that if a markable Void is selected, the mark will be applied /
removed.
- Shows how `markableVoid()` can work in the mentions example
* wip
* wip
* wip - fully working without hard marks
* fix editor crashes when inserting/deleting at the edges of marks
* fix various restore dom related crashes
* fix delete with pending changes, zero widths on android, mutation tracking
* track placeholder delete in detached strings, zero-widths
* wip mark placeholders
* get rid of mutation detection in favor of beforeinput
* fix various selection race conditions
* fix various crashes when deleting at the beginning of nodes
* wip diff transforms, selection handling fixes
* cleanup restoreDOM and fix noop restore edge-case
* fix mark placeholders
* fix toSlatePoint edge-case
* properly flush user select with pending changes
* Prevent editor crash when deleting before a non-contenteditable element
* wip markdown shortcut example
* transform pending changes and selection by remote changes, simplify pending actions, handle all input types
* improve change transform, mark(-placeholder) handling
* manually handle gboard bug, fix restoredom nested editor
* fix parent mutation condition
* cleanup, mark placeholder fixes
* mark placeholder fixes
* fix mark placeholder condition
* hide placeholder if we have pending diffs
* cleanup
* yarn install
* add workaround for swiftkey placeholder issue
* cleanup
* add changeset
* feat(slate-react): fix edge-case crash, add androidPendingDiffs, rename scheduleFlushPendingChanges
* flush pending selection on same line without pending changes/action
* keep formatting of pending diffs when adding/removing selection marks
* unref selection ref on unmatching dom state
* improve markdown shortcut example flush trigger to show how a more generic solution would work
* fix markdown shortcut example trigger logic
* fix isInsertAfterMarkPlaceholder logic
There is a Chromium bug where, if you have an inline at the end of a block,
clicking the end of a block puts the cursor inside the inline
instead of inside the final {text: ''} node.
This commit updates the inlines example to show the problem, and to show
a known workaround for the problem.
See for context: https://github.com/ianstormtaylor/slate/issues/4704
* fix: isBlockActive should use Array.from()
The richtext.tsx example `isBlockActive` was not working for me in my environtment because `Editor.nodes` returns a Generator, not an Array. So `isBlockActive` always returned false. Wrapping it in `Array.from` fixes the example.
* run prettier
Co-authored-by: Dan Tello <dtello@medallia.com>
* Fix `setNodes()` props argument type
Because Typescript can know which type of nodes we are modifying thanks to the `T` inferred from `match` function,
it can also properly narrow down the `props` argument type.
* Fix TS errors in examples
* Add a changeset
It's important to have 100% working examples. Unfortunately this example
I introduced has a bug on Chrome and Safari, where the cursor jumps
around wrongly when using the "up" and "down" keys to navigate. This
is due to a browser bug with display:inline-block elements, and there
is no known workaround except to use display:inline.
* Fix crash when a void node deletes itself on click
Fixes https://github.com/ianstormtaylor/slate/issues/4240
* Add 'image delete' feature to example
My immediate motivation is to demonstrate the bug that this fixes. But
this is also a very common editor feature, and I think it's valuable
to show how to achieve it.
* add changeset
* fix:eslint
* revert changes to mentions.tsx
* Official custom inlines example
This generalizes the "links" example to an "inlines" example, adding
a new example of an inline: an "editable button".
Firstly, this is important to demonstrate that Slate really does allow
_custom_ elements, and not just "standard" ones like links that you'll
find in any editor.
Secondly, it's important to show an example of an inline where "offset"
movement should be used. With links, it's arguable that the cursor
positions <link>foo<cursor/></link> and <link>foo</link><cursor/>
should be considered the same, because they display in the same
position. But with the editable button, the cursor is clearly in a
different position, and so offset movement should be used.
* lint
* fix integration test
* update readme
* try again
Due to standard link CSS, the cursor at the end of the link looks the
same as the cursor immediately after the link, and the cursor at the
start of the link looks the same as the cursor immediately before the
link. However, these are semantically different locations. I've had
several problems with Slate misinterpreting these locations, and had
trouble showing these problems to others using the standard examples,
because the only example of an editable inline element is the link.
To fix this, I've added a box-shadow to the link when it's selected. It
should now be clear to the user whether the cursor is inside or
outside the element.
* Update forced-layout example
Enforce layout to an explicit block index to allow for other block types
* Update site/examples/forced-layout.tsx
* fix layout example to comply with linting rules
Co-authored-by: Lukas Murdock <lukas.murdock@gmail.com>
* cypress: mentions example test
* cypress: search highlighting test
* cypress: tables example test
* cypress: check html in richtext
* Update cypress/integration/mentions.ts
Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>
* Update cypress/integration/search-highlighting.ts
Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>
* cypress: reset page before each test case
* cypress: Custom command dataCy
* cypress: seperate directory for examples' tests
* cypress: remove comments
* cypress: add placeholder test
* cypress: add plain text test
Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>
* added cypress test for check-list page
* Update cypress/integration/checkLists.ts
Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>
* Update cypress/integration/checkLists.ts
Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>
* Update cypress/integration/checkLists.ts
Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>
* Added beforeEach() call
* moved the checkLists.ts example to the examples folder
Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>
* Revert "Add DefaultEditable and AndroidEditable to exports (#4255)"
This reverts commit 5298e51f6e8a7d62acb71092f7afd6565cbdc65e.
* Revert "Feature/android keyboard support (#4200)"
This reverts commit e03ce7c5614a1a69d039bfbeea94696376585fd0.
* Added Android Keyboard Support
* Added changeset for android keyboard support
* Removed dead code in android editable that supported non-android environments
* Removed unnecessary attributes observation for android-editable
* Removed dead code
* Added no-error boundary
* Fixed issues with linters
