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
* getDirtyPaths can now be customized by Slate users (#4012)
* Moved getDirtyPaths() into the editor object so it can be customized via plugin
* docs: Update document in Chinese (#4017)
Co-authored-by: liuchengshuai001 <liuchengshuai001@ke.com>
* Removed unused import
* Use shadowRoot if available
* Removed optional chaining
* Added workaround for chrom bug in ShadowDOM
* Added shadow DOM example
* Add a shadow DOM example
Shadow DOM brings different behaviours for selection and active
elements. This adds an example where the editor is found within a shadow
DOM, in fact, the editor is two levels deep in nested shadow DOMs.
The handling of selections means that this editor doesn't work properly
so Slate will need to be made aware of the shadow DOM in order to fix
this.
* User DocumentOrShadowRoot for selection and active elements
If the editor is within a ShadowDom, the selections and active element
APIs are implemented on the ShadowRoot for Chrome. Other browsers still
use the Document's version of these APIs for the shadow DOM.
Instead of defaulting to `window.document`, find the appropriate root to
use for the editor in question.
* Add compatibility for Chrome's isCollapsed bug
Chrome will always return true for isCollapsed on a selection from the
shadow DOM. Work around this by instead computing this property on
Chrome.
https://bugs.chromium.org/p/chromium/issues/detail?id=447523
* Removed duplicated example
* Fixed possible null value
* Use existing PlainTextExample
* Re-added local Editor to have clear initialValue
* Optimize shadowRoot checkup
* Remove getDocumentOrShadowRoot util in favor of findDocumentOrShadowRoot
* Re-added getDocumentOrShadowRoot
* Put selectionchange listener on window.document
* Resetted changes from main branch
* Create tiny-walls-deliver.md
* Update tiny-walls-deliver.md
* Update tiny-walls-deliver.md
Co-authored-by: Tommy Dong <contact@tomdong.io>
Co-authored-by: Jacob <40483898+jacob-lcs@users.noreply.github.com>
Co-authored-by: liuchengshuai001 <liuchengshuai001@ke.com>
Co-authored-by: Andrew Scull <andrew.scull@live.com>
Co-authored-by: Ian Storm Taylor <ian@ianstormtaylor.com>
* Have useSlate and useSlateStatic return the Custom Editor
* v0.60.12
* Add generic to useSlate and useSlateStatic
* v0.60.13
* Fix useSlate and useSlateStatic to return customized Editor type
* v0.60.14
