30:T4b2,md` ## Usage 1. Import the pre-built Slate App component. ~~~js import {React, Playground, editorDocument, factory, pretty, htm} from "@hastebrot/slate@452" // In another cell: React.render(htm\`<\${Playground} initialDocument=\${factory.newElement("A line of text in a paragraph.", { type: "paragraph" })} />\`) // In another cell: pretty(editorDocument) ~~~ 2. Or import a specific Slate version. ~~~js slateVersion = "0.59.0" // In another cell: import {React, Slate} with {slateVersion} from "@hastebrot/slate@452" ~~~ ## History - **30 Sep 2020:** (\`@452\`) Upgrade to React v17.0-rc.2 and Slate v0.59.0. - **14 Aug 2020:** (\`@446\`) Upgraded to React v17.0-rc.0 and Slate v0.58.4. Refactored code into smaller bits. Introduced \`Playground\`, \`editorDocument\`, \`editorSelection\`, and \`factory\`. - **14 May 2020:** (\`@389\`) Upgraded to Slate v0.58.1. - **8 Apr 2020:** Upgraded to [React v16.13](https://github.com/facebook/react/releases/tag/v16.13.0) (released on 26 Feb 2020). - **8 Feb 2020:** Upgraded to [Slate v0.50.x](https://docs.slatejs.org/general/changelog#0-50-0-november-27-2019) (first released on 27 Nov 2019). `31:[] 2e:{"title":"Slate","cells":[{"id":0,"value":"md`\n# Slate\n#### A completely customizable framework for building rich text editors\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`\n- Project site: https://www.slatejs.org/\n- Documentation: https://docs.slatejs.org/\n- Repository: https://github.com/ianstormtaylor/slate\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"React.render(htm`<${Playground} \n initialDocument=${factory.newElement(\"A line of text in a paragraph.\", { type: \"paragraph\" })} \n/>`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"mutable editorDocument = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"mutable editorSelection = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"Playground = ({ initialDocument, ...otherProps }) => {\n const { Editor } = Slate\n\n const editor = useSlateEditor()\n const [document, setDocument] = React.useState(initialDocument)\n \n React.useEffect(() => { \n mutable editorDocument = document\n }, [document])\n\n const onChange = document => {\n Editor.normalize(editor, { force: true })\n setDocument(document)\n mutable editorSelection = editor.selection || {}\n }\n \n const onKeyDown = event => {}\n\n return container(htm`\n <${EditorComponent} \n editor=${editor} \n document=${document}\n onChange=${onChange}\n onKeyDown=${onKeyDown}\n ...${otherProps}\n />\n `)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"useSlateEditor = () => {\n return React.useMemo(() => {\n return Slate.react.withReact(Slate.createEditor())\n }, [])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"EditorComponent = ({ editor, document, onChange, onKeyDown, slateProps, editableProps }) => {\n return htm`\n <${Slate.react.Slate} \n editor=${editor} \n value=${document}\n onChange=${onChange}\n ...${slateProps}>\n <${Slate.react.Editable}\n spellCheck=\"false\"\n onKeyDown=${onKeyDown}\n ...${editableProps}\n />\n \n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"container = children => {\n const outerStyle = { minHeight: \"85px\", boxSizing: \"border-box\", background: \"rgb(244, 245, 247)\", margin: \"0 -14px\", padding: \"14px 14px\" }\n const innerStyle = { background: \"rgb(255, 255, 255)\", boxShadow: \"rgba(9, 30, 66, 0.25) 0px 1px 2px 0px\", padding: \"25px\", fontFamily: \"var(--sans-serif)\", fontSize: \"120%\", margin: \"5px 0\" }\n return htm`

${children}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"factory = {\n return {\n newElement: (text, props = {}) => {\n return [{ ...props, children: [{ text }] }]\n },\n newPath: (path) => {\n return [...path]\n },\n newPoint: (path, offset) => {\n return { path: [...path], offset }\n },\n newRange: (anchorPath, anchorOffset, focusPath, focusOffset) => {\n return {\n anchor: { path: [...anchorPath], offset: anchorOffset },\n focus: { path: [...focusPath], offset: focusOffset },\n }\n },\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"pretty = value => JSON.stringify(value, null, 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"slateVersion = \"0.59.0\" // https://github.com/ianstormtaylor/slate/releases","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"reactVersion = \"17.0.0-rc.2\" // https://github.com/facebook/react/releases","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"requires = require.alias({\n \"slate\": `https://unpkg.com/slate@${slateVersion}/dist/slate.min.js`,\n \"slate-react\": `https://unpkg.com/slate-react@${slateVersion}/dist/slate-react.min.js`,\n //\"react\": `https://unpkg.com/react@${reactVersion}/umd/react.production.min.js`,\n //\"react-dom\": `https://unpkg.com/react-dom@${reactVersion}/umd/react-dom.production.min.js`,\n //\"react-is\": `https://unpkg.com/react-is@${reactVersion}/umd/react-is.production.min.js`,\n \"react\": React,\n \"react-dom\": ReactDOM,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"import { React, ReactDOM, htm, styled } from \"@hastebrot/react@354\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"Slate = {\n const slate = await requires(\"slate\")\n slate.react = await requires(\"slate-react\")\n return slate\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}