Attempt at virtual scrolling

src/stories/Editor/Editor.stories.tsx

@@ -7,9 +7,12 @@ import EditorWithSpellcheck, {
 import EditorWithDecorations, {
   EditorWithDecorationsProps,
 } from './EditorWithDecorations'
+import EditorVirtualScrolling, {
+  EditorVirtualScrollingProps,
+} from './EditorVirtualScrolling'
 
 const meta: Meta = {
-  title: 'Example/Editor',
+  title: 'Editor',
   component: EditorWithDecorations,
   argTypes: {
     initialValue: { control: 'object' },
@@ -18,31 +21,35 @@ const meta: Meta = {
 
 export default meta
 
-// const Template: Story<EditorProps> = (args) => <Editor {...args} />
+/** Templates */
+
 const SpellcheckTemplate: Story<EditorWithSpellcheckProps> = (args) => (
   <EditorWithSpellcheck {...args} />
 )
 const DecorationsTemplate: Story<EditorWithDecorationsProps> = (args) => (
   <EditorWithDecorations {...args} />
 )
+const VirtualScrollingTemplate: Story<EditorVirtualScrollingProps> = (args) => (
+  <EditorVirtualScrolling {...args} />
+)
 
 const emptyValue = () => [
   {
     children: [{ text: '' }],
   },
 ]
 
-// export const Empty = Template.bind({})
-// Empty.args = {
-//   initialValue: emptyValue(),
-// }
-
 export const Decorations = DecorationsTemplate.bind({})
 Decorations.args = {
   initialValue: emptyValue(),
 }
 
-export const Spellcheck = SpellcheckTemplate.bind({})
-Spellcheck.args = {
+export const CustomSpellcheck = SpellcheckTemplate.bind({})
+CustomSpellcheck.args = {
+  initialValue: emptyValue(),
+}
+
+export const VirtualScrolling = VirtualScrollingTemplate.bind({})
+VirtualScrolling.args = {
   initialValue: emptyValue(),
 }

src/stories/Editor/EditorVirtualScrolling.tsx

@@ -0,0 +1,81 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import { css, jsx } from '@emotion/core'
+
+import React from 'react'
+import { createEditor, Node, NodeEntry, Range } from 'slate'
+import { Editable, RenderElementProps, Slate, withReact } from 'slate-react'
+
+const componentCss = css`
+  [contenteditable='true'] {
+    border: 1px solid #ccc;
+    padding: 4px;
+  }
+`
+
+export interface EditorVirtualScrollingProps {
+  initialValue: Node[]
+}
+
+const EditorVirtualScrolling: React.FC<EditorVirtualScrollingProps> = ({
+  initialValue,
+}) => {
+  const editor = React.useMemo(() => withReact(createEditor()), [])
+  const [value, setValue] = React.useState(initialValue)
+  const virtualValue = React.useMemo(() => value.slice(0, 2), [value])
+
+  const decorate = React.useCallback(([node, path]: NodeEntry<Node>) => {
+    const ranges: Range[] = []
+
+    if (path.length === 1 && path[0] < 3) {
+      ranges.push({
+        anchor: { path, offset: 0 },
+        focus: { path, offset: 2 },
+        virtual: true,
+      })
+    }
+
+    return ranges
+  }, [])
+
+  const renderElement = React.useCallback(
+    ({ element, attributes, children }: RenderElementProps) => {
+      return (
+        <div style={{ color: true ? 'green' : undefined }} {...attributes}>
+          {children}
+        </div>
+      )
+    },
+    []
+  )
+
+  return (
+    <div css={componentCss}>
+      <Slate editor={editor} value={virtualValue} onChange={setValue}>
+        <Editable
+          decorate={decorate}
+          // as={VirtualDocument}
+          renderElement={renderElement}
+        />
+      </Slate>
+    </div>
+  )
+}
+
+export default EditorVirtualScrolling
+
+// interface VirtualDocumentProps {}
+
+// const VirtualDocument: React.FC<VirtualDocumentProps> = React.forwardRef<
+//   HTMLDivElement,
+//   VirtualDocumentProps
+// >(({ children, ...props }, ref) => {
+//   console.log(props, children)
+//   return (
+//     <div ref={ref} {...props}>
+//       <div contentEditable={false}>Blah</div>
+//       {children}
+//       <div contentEditable={false}>Bleh</div>
+//     </div>
+//   )
+// })