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
* Experimental release to see if CustomTypes holds up through a publish
* Add experimental release script
* Fix lint
* v0.60.5-alpha.0
* Allow null properties in setNodes
* v0.60.6-alpha.0
* Revert null properties on Transforms.setNodes
* v0.60.7-alpha.0
* Update examples to use custom Element and Text with discriminated unions
* Add documentation for using TypeScript improvements
* Be explicit about typescript version in package.json
* Force lerna bootstrap to fix build issues on CI and fix a few type examples
* Add slate devDependencies with * back
* v0.60.7
* Switch to a non prerelease version to fix lerna not linking in root
* Add documentation for not using prerelease versions and on how to create experimental releases
* Try removing lerna bootstrap and see if it works
* mvp implementation for working with non-global window instances
* remove unused element renderer
* fix typo in comment
* fix wrong example reference
* Add @babel/helper-call-delegate to fix build error
Co-authored-by: Lukas Buenger <lukasbuenger@gmail.com>
This PR adds better TypeScript types into Slate and is based on the proposal here: https://github.com/ianstormtaylor/slate/issues/3725
* Extend Slate's types like Element and Text
* Supports type discrimination (ie. if an element has type === "table" then we get a reduced set of properties)
* added custom types
* files
* more extensions
* files
* changed fixtures
* changes eslint file
* changed element.children to descendant
* updated types
* more type changes
* changed a lot of typing, still getting building errors
* extended text type in slate-react
* removed type assertions
* Clean up of custom types and a couple uneeded comments.
* Rename headingElement-true.tsx.tsx to headingElement-true.tsx
* moved basetext and baselement
* Update packages/slate/src/interfaces/text.ts
Co-authored-by: Brent Farese <25846953+BrentFarese@users.noreply.github.com>
* Fix some type issues with core functions.
* Clean up text and element files.
* Convert other types to extended types.
* Change the type of editor.marks to the appropriate type.
* Add version 100.0.0 to package.json
* Revert "Add version 100.0.0 to package.json"
This reverts commit 329e44e43d968700655b1c46f968bfd3147e7339.
* added custom types
* files
* more extensions
* files
* changed fixtures
* changes eslint file
* changed element.children to descendant
* updated types
* more type changes
* changed a lot of typing, still getting building errors
* extended text type in slate-react
* removed type assertions
* Clean up of custom types and a couple uneeded comments.
* Rename headingElement-true.tsx.tsx to headingElement-true.tsx
* moved basetext and baselement
* Update packages/slate/src/interfaces/text.ts
Co-authored-by: Brent Farese <25846953+BrentFarese@users.noreply.github.com>
* Fix some type issues with core functions.
* Clean up text and element files.
* Convert other types to extended types.
* Change the type of editor.marks to the appropriate type.
* Run linter.
* Remove key:string uknown from the base types.
* Clean up types after removing key:string unknown.
* Lint and prettier fixes.
* Implement custom-types
Co-authored-by: mdmjg <mdj308@nyu.edu>
* added custom types to examples
* reset yarn lock
* added ts to fixtures
* examples custom types
* Working fix
* ts-thesunny-try
* Extract interface types.
* Fix minor return type in create-editor.
* Fix the typing issue with Location having compile time CustomTypes
* Extract types for Transforms.
* Update README.
* Fix dependency on slate-history in slate-react
Co-authored-by: mdmjg <mdj308@nyu.edu>
Co-authored-by: Brent Farese <brentfarese@gmail.com>
Co-authored-by: Brent Farese <25846953+BrentFarese@users.noreply.github.com>
Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>
* Add version 100.0.0 to package.json
* Revert "Add version 100.0.0 to package.json"
This reverts commit 329e44e43d968700655b1c46f968bfd3147e7339.
* fixed typo in html file
Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>
* 3536 support flat functionality + beforeinput in Edge
* 3536 support flat functionality + beforeinput in Edge
* 3536 remove support for flat functionality
* 3536 added description of regexp
Co-authored-by: Pavlyna Bevz <pavlynabevz@pbevz-mbp.local>
