2016-08-07 17:25:43 -07:00
# Using the Bundled Source
2018-02-07 15:58:41 +00:00
For most folks, you'll want to install Slate via `npm` , in which case you can follow the regular [Installing Slate ](./installing-slate.md ) guide.
2016-08-07 17:25:43 -07:00
But, if you'd rather install Slate by simply adding a `<script>` tag to your application, this guide will help you. To make the "bundled" use case simpler, each version of Slate ships with a bundled source file called `slate.js` .
To get a copy of `slate.js` , download the version of slate you want from npm:
```
2018-02-02 18:46:36 -05:00
npm install slate@latest
2016-08-07 17:25:43 -07:00
```
And then look in the `node_modules` folder for the bundled `slate.js` file:
```
node_modules/
slate/
dist/
slate.js
slate.min.js
```
A minified version called `slate.min.js` is also included for convenience.
Next (#3093)
* remove some key usage from core, refactor Operations.apply
* undeprecate some methods
* convert more key usage to paths
* update deprecations
* convert selection commands to use all paths
* refactor word boundary selection logic
* convert many at-range commands to use paths
* convert wrapBlock and wrapInline to not use keys
* cleanup
* remove chainability from editor
* simplify commands, queries and middleware
* convert deleteAtRange
* remove key usage from schema, deprecate *ByKey methods
* migrate *ByKey tests, remove index from *ByPath signatures
* rename at-current-range tests
* deprecate mode key usage, migrate more tests away from keys
* deprecate range and point methods which rely on keys to work
* refactor insertBlock, without fixing warnings
* add pathRef/pointRef, fix insertBlock/Inline deprecations, work on insertFragment
* refactor insertFragment
* get rich-text example rendering
* fix lint
* refactor query files, fix more tests
* remove unused queries, refactor others
* deprecate splitDescendantsByPath
* merge master
* add typescript, convert slate, slate-hyperscript, slate-plain-serializer
* add Point, Path, Range, Annotation tests
* add Annotation, Change, Element, Fragment, Mark, Range, Selection, Value interfaces tests
* add Operation and Text tests
* add Node tests
* get operations and normalization tests working for slate
* get *AtPath command tests passing
* rename *AtPath command tests
* rename
* get *AtPoint tests working
* rename
* rename
* add value queries tests
* add element, mark and path queries tests
* convert most on-selection tests
* convert on-selection commands
* rename
* get addMarks and delete commands working
* rename
* rename
* rename
* refactor value.positions(), work on delete tests
* progress on delete tests
* more delete work
* finish delete tests
* start converting to at-based commands
* restructure query tests
* restructure operations tests
* more work converting to multi-purpose commands
* lots of progress on converting to at-based commands
* add unwrapNodes
* remove setValue
* more progress
* refactor node commands to use consistent matching logic
* cleanup, get non-fragment commands passing
* remove annotations and isAtomic
* rename surround/pluck to cover/uncover
* add location concept, change at-path to from-path for iterables
* refactor batches
* add location-based queries
* refactor hanging logic
* more location query work
* renaming
* use getMatch more
* add split to wrap/unwrap
* flip levels/ancestors ordering
* switch splitNodes to use levels
* change split to always:false by default
* fix tests
* add more queries tests
* fixing more delete logic
* add more splitNodes tests
* get rest of delete tests passing
* fix location-based logic in some commands
* cleanup
* get previous packages tests passing again
* add slate-history package
* start slate-schema work
* start of react working
* rendering fixes
* get rich and plain text examples working
* get image example working with hooks and dropping
* refactor onDrop to be internal
* inline more event handlers
* refactor lots of event-related logic
* change rendering to use render props
* delete unused stuff
* cleanup dom utils
* remove unused deps
* remove unnecessary packages, add placeholder
* remove slate-react-placeholder package
* remove unused dep
* remove unnecessary tests, fix readonly example
* convert checklists example
* switch to next from webpack
* get link example working
* convert more examples
* preserve keys, memoized leafs/texts, fix node lookup
* fix to always useLayoutEffect for ordering
* fix annotations to be maps, memoize elements
* remove Change interface
* remove String interface
* rename Node.entries to Node.nodes
* remove unnecessary value queries
* default to selection when iterating, cleanup
* remove unused files
* update scroll into view logic
* fix undoing, remove constructor types
* dont sync selection while composing
* add workflows
* remove unused deps
* convert mentions example
* tweaks
* convert remaining examples
* rename h to jsx, update schema
* fix schema tests
* fix slate-schema logic and tests
* really fix slate-schema and forced-layout example
* get start of insertFragment tests working
* remove Fragment interface
* remove debugger
* get all non-skipped tests passing
* cleanup deps
* run prettier
* configure eslint for typescript
* more eslint fixes...
* more passing
* update some docs
* fix examples
* port windows undo hotkey change
* fix deps, add basic firefox support
* add event overriding, update walkthroughs
* add commands, remove classes, cleanup examples
* cleanup rollup config
* update tests
* rename queries tests
* update other tests
* update walkthroughs
* cleanup interface exports
* cleanup, change mark transforms to require location
* undo mark transform change
* more
* fix tests
* fix example
* update walkthroughs
* update docs
* update docs
* remove annotations
* remove value, move selection and children to editor
* add migrating doc
* fix lint
* fix tests
* fix DOM types aliasing
* add next export
* update deps, fix prod build
* fix prod build
* update scripts
* update docs and changelogs
* update workflow and pull request template
2019-11-27 20:54:42 -05:00
Before you can add `slate.js` to your page, you need to bring your own copy of `react` , `react-dom` and `react-dom-server` , like so:
2016-08-07 17:25:43 -07:00
```html
< script src = "./vendor/react.js" > < / script >
< script src = "./vendor/react-dom.js" > < / script >
2017-08-23 02:56:55 +03:00
< script src = "./vendor/react-dom-server.js" > < / script >
2016-08-07 17:25:43 -07:00
```
This ensures that Slate isn't bundling its own copy of Immutable and React, which would greatly increase the file size of your application.
Then you can add `slate.js` after those includes:
```html
< script src = "./vendor/slate.js" > < / script >
```
2016-09-01 03:35:22 +01:00
To make things easier, for quick prototyping, you can also use the [`unpkg.com` ](https://unpkg.com/#/ ) delivery network that makes working with bundled npm modules easier. In that case, your includes would look like:
2016-08-07 17:25:43 -07:00
```html
2018-02-02 18:46:36 -05:00
< script src = "https://unpkg.com/react/umd/react.production.min.js" > < / script >
< script src = "https://unpkg.com/react-dom/umd/react-dom.production.min.js" > < / script >
< script src = "https://unpkg.com/react-dom/umd/react-dom-server.browser.production.min.js" > < / script >
2016-09-01 03:35:22 +01:00
< script src = "https://unpkg.com/slate/dist/slate.js" > < / script >
2018-08-01 01:46:30 +02:00
< script src = "https://unpkg.com/slate-react/dist/slate-react.js" > < / script >
2016-08-07 17:25:43 -07:00
```
That's it, you're ready to go!