@dxos/react-ui-editor 0.4.4-next.e0df51e → 0.4.5-main.17763ce

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.4-next.e0df51e",
+  "version": "0.4.5-main.17763ce",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,7 +23,7 @@
     "@codemirror/state": "^6.4.0",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.23.0",
-    "@fluentui/react-tabster": "^9.18.0",
+    "@fluentui/react-tabster": "^9.19.0",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
     "@lezer/markdown": "^1.2.0",
@@ -36,20 +36,20 @@
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.4.4-next.e0df51e",
-    "@dxos/automerge": "0.4.4-next.e0df51e",
-    "@dxos/debug": "0.4.4-next.e0df51e",
-    "@dxos/display-name": "0.4.4-next.e0df51e",
-    "@dxos/context": "0.4.4-next.e0df51e",
-    "@dxos/echo-schema": "0.4.4-next.e0df51e",
-    "@dxos/invariant": "0.4.4-next.e0df51e",
-    "@dxos/log": "0.4.4-next.e0df51e",
-    "@dxos/react-async": "0.4.4-next.e0df51e",
-    "@dxos/react-ui": "0.4.4-next.e0df51e",
-    "@dxos/protocols": "0.4.4-next.e0df51e",
-    "@dxos/react-ui-theme": "0.4.4-next.e0df51e",
-    "@dxos/text-model": "0.4.4-next.e0df51e",
-    "@dxos/util": "0.4.4-next.e0df51e"
+    "@dxos/async": "0.4.5-main.17763ce",
+    "@dxos/automerge": "0.4.5-main.17763ce",
+    "@dxos/display-name": "0.4.5-main.17763ce",
+    "@dxos/debug": "0.4.5-main.17763ce",
+    "@dxos/echo-schema": "0.4.5-main.17763ce",
+    "@dxos/protocols": "0.4.5-main.17763ce",
+    "@dxos/invariant": "0.4.5-main.17763ce",
+    "@dxos/context": "0.4.5-main.17763ce",
+    "@dxos/react-async": "0.4.5-main.17763ce",
+    "@dxos/react-ui-theme": "0.4.5-main.17763ce",
+    "@dxos/util": "0.4.5-main.17763ce",
+    "@dxos/react-ui": "0.4.5-main.17763ce",
+    "@dxos/text-model": "0.4.5-main.17763ce",
+    "@dxos/log": "0.4.5-main.17763ce"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
@@ -65,31 +65,34 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/react-test-renderer": "^17.0.2",
-    "@vitest/ui": "^1.2.1",
+    "@vitest/browser": "^1.2.2",
+    "@vitest/ui": "^1.2.2",
     "deepsignal": "^1.5.0",
     "happy-dom": "^13.3.1",
     "jsdom": "^20.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",
-    "vite": "^5.0.12",
+    "vite": "^5.1.3",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
-    "vitest": "^1.2.1",
-    "@dxos/echo-signals": "0.4.4-next.e0df51e",
-    "@dxos/config": "0.4.4-next.e0df51e",
-    "@dxos/keyboard": "0.4.4-next.e0df51e",
-    "@dxos/random": "0.4.4-next.e0df51e",
-    "@dxos/echo-typegen": "0.4.4-next.e0df51e",
-    "@dxos/react-ui": "0.4.4-next.e0df51e",
-    "@dxos/storybook-utils": "0.4.4-next.e0df51e",
-    "@dxos/react-client": "0.4.4-next.e0df51e"
+    "vitest": "^1.2.2",
+    "@dxos/config": "0.4.5-main.17763ce",
+    "@dxos/echo-signals": "0.4.5-main.17763ce",
+    "@dxos/echo-typegen": "0.4.5-main.17763ce",
+    "@dxos/random": "0.4.5-main.17763ce",
+    "@dxos/react-client": "0.4.5-main.17763ce",
+    "@dxos/react-ui": "0.4.5-main.17763ce",
+    "@dxos/storybook-utils": "0.4.5-main.17763ce",
+    "@dxos/keyboard": "0.4.5-main.17763ce"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
+    "@vitest/browser": "^1.2.2",
+    "@vitest/ui": "^1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.4-next.e0df51e"
+    "@dxos/react-client": "0.4.5-main.17763ce"
   },
   "publishConfig": {
     "access": "public"

package/src/components/TextEditor/MarkdownEditor.stories.tsx

@@ -19,19 +19,15 @@ import { withTheme } from '@dxos/storybook-utils';
 import { MarkdownEditor, type TextEditorProps } from './TextEditor';
 import {
   type CommentsOptions,
-  type LinkOptions,
   autocomplete,
   blast,
-  code,
+  decorateMarkdown,
   comments,
   defaultOptions,
-  heading,
-  hr,
   image,
-  link,
+  linkTooltip,
   mention,
   table,
-  tasklist,
   typewriter,
   useComments,
   formatting,
@@ -47,9 +43,11 @@ const str = (...lines: string[]) => lines.join('\n');
 
 const num = () => faker.number.int({ min: 0, max: 9999 }).toLocaleString();
 
-// prettier-ignore
+const img = '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)';
+
 const text = {
   tasks: str(
+    //
     '## Tasks',
     '',
     '- [x] decorator',
@@ -61,6 +59,7 @@ const text = {
   ),
 
   list: str(
+    //
     '## List',
     '',
     '- new york',
@@ -70,12 +69,13 @@ const text = {
   ),
 
   numbered: str(
+    //
     '## Numbered',
     '',
     '1. one',
     '2. two',
     '3. three',
-    ''
+    '',
   ),
 
   code: str(
@@ -115,7 +115,7 @@ const text = {
     '',
   ),
 
-  image: str('# Image', '', '![dxos](https://pbs.twimg.com/profile_banners/1268328127673044992/1684766689/1500x500)'),
+  image: str('# Image', '', img),
 
   headings: str(
     ...[1, 2, 3, 4, 5, 6].map((level) => ['#'.repeat(level) + ` Heading ${level}`, faker.lorem.sentences(), '']).flat(),
@@ -123,7 +123,7 @@ const text = {
 
   paragraphs: str(...faker.helpers.multiple(() => [faker.lorem.paragraph(), ''], { count: 3 }).flat()),
 
-  footer: str('', '', '', '', '')
+  footer: str('', '', '', '', ''),
 };
 
 const document = str(
@@ -131,6 +131,12 @@ const document = str(
   '',
   '> This is a block quote.',
   '',
+  '> This is a long wrapping block quote. Neque reiciendis ullam quae error labore sit, at, et, nulla, aut at nostrum omnis quas nostrum, at consectetur vitae eos asperiores non omnis ullam in beatae at vitae deserunt asperiores sapiente.',
+  '',
+  '> This is',
+  '> a multi-line',
+  '> block quote.',
+  '',
   'This is all about https://dxos.org and related technologies.',
   '',
   'This this is **bold**, ~~strikethrough~~, _italic_, and `f(INLINE)`.',
@@ -167,7 +173,7 @@ const names = ['adam', 'alice', 'alison', 'bob', 'carol', 'charlie', 'sayuri', '
 const hover =
   'rounded-sm text-base text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
 
-const onHoverLinkTooltip: LinkOptions['onHover'] = (el, url) => {
+const renderLinkTooltip = (el: Element, url: string) => {
   const web = new URL(url);
   createRoot(el).render(
     <StrictMode>
@@ -200,7 +206,7 @@ const onCommentsHover: CommentsOptions['onHover'] = (el, shortcut) => {
   );
 };
 
-const onRenderLink: LinkOptions['onRender'] = (el, url) => {
+const renderLinkButton = (el: Element, url: string) => {
   createRoot(el).render(
     <StrictMode>
       <a href={url} target='_blank' rel='noreferrer' className={hover}>
@@ -251,14 +257,11 @@ const defaults = [
   autocomplete({
     onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
   }),
-  code(),
+  decorateMarkdown({ renderLinkButton }),
   formatting(),
-  heading(),
-  hr(),
   image(),
-  link({ onRender: onRenderLink, onHover: onHoverLinkTooltip }),
+  linkTooltip(renderLinkTooltip),
   table(),
-  tasklist(),
 ];
 
 export const Default = {
@@ -275,6 +278,11 @@ export const NoExtensions = {
 
 const large = faker.helpers.multiple(() => faker.lorem.paragraph({ min: 8, max: 16 }), { count: 20 }).join('\n\n');
 
+const largeWithImages = faker.helpers
+  .multiple(() => [faker.lorem.paragraph({ min: 12, max: 16 }), img], { count: 20 })
+  .flatMap((x) => x)
+  .join('\n\n');
+
 export const Empty = {
   render: () => <Story />,
 };
@@ -283,26 +291,25 @@ export const Scrolling = {
   render: () => <Story text={str('# Large Document', '', large)} extensions={[]} />,
 };
 
-export const Links = {
-  render: () => (
-    <Story
-      text={str(text.links, text.footer)}
-      extensions={[link({ onHover: onHoverLinkTooltip, onRender: onRenderLink })]}
-    />
-  ),
+export const ScrollingWithImages = {
+  render: () => <Story text={str('# Large Document', '', largeWithImages)} extensions={[image()]} />,
 };
 
-export const Code = {
-  render: () => <Story text={str(text.code, text.footer)} extensions={[code()]} />,
+export const Links = {
+  render: () => <Story text={str(text.links, text.footer)} extensions={[linkTooltip(renderLinkTooltip)]} />,
 };
 
 export const Image = {
   render: () => <Story text={str(text.image, text.footer)} extensions={[image()]} />,
 };
 
+export const Code = {
+  render: () => <Story text={str(text.code, text.footer)} extensions={[decorateMarkdown()]} />,
+};
+
 export const Lists = {
   render: () => (
-    <Story text={str(text.tasks, '', text.list, '', text.numbered, text.footer)} extensions={[tasklist()]} />
+    <Story text={str(text.tasks, '', text.list, '', text.numbered, text.footer)} extensions={[decorateMarkdown()]} />
   ),
 };
 
@@ -324,7 +331,7 @@ export const Autocomplete = {
     <Story
       text={str('# Autocomplete', '', 'Press Ctrl-Space...', text.footer)}
       extensions={[
-        link({ onRender: onRenderLink }),
+        decorateMarkdown({ renderLinkButton }),
         autocomplete({
           onSearch: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
         }),
@@ -382,15 +389,6 @@ export const Comments = {
   },
 };
 
-export const HorizontalRule = {
-  render: () => (
-    <Story
-      text={str('# Horizontal Rule', '', text.paragraphs, '---', text.paragraphs, '---', text.paragraphs)}
-      extensions={[hr()]}
-    />
-  ),
-};
-
 export const Vim = {
   render: () => (
     <Story

package/src/components/TextEditor/TextEditor.tsx

@@ -15,6 +15,7 @@ import React, {
   useImperativeHandle,
   useRef,
   useState,
+  useMemo,
 } from 'react';
 
 import { log } from '@dxos/log';
@@ -172,7 +173,8 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
         newView?.destroy();
         setView(null);
       };
-    }, [rootRef, model, readonly, themeMode]);
+      // TODO(wittjosiah): Does `rootRef` ever change? Only `.current` changes?
+    }, [rootRef, extensions, model, readonly, themeMode]);
 
     // Focus editor on Enter (e.g., when tabbing to this component).
     const handleKeyUp = useCallback<KeyboardEventHandler<HTMLDivElement>>(
@@ -203,14 +205,21 @@ export const BaseTextEditor = forwardRef<EditorView | null, TextEditorProps>(
 );
 
 export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
-  ({ readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
+  (
+    { readonly, placeholder, lineWrapping, theme = textTheme, slots, extensions: _extensions, ...props },
+    forwardedRef,
+  ) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultTextSlots);
+    const extensions = useMemo(
+      () => [createBasicBundle({ themeMode, placeholder, lineWrapping }), ...(_extensions ?? [])],
+      [themeMode, placeholder, lineWrapping, _extensions],
+    );
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[createBasicBundle({ themeMode, placeholder, lineWrapping }), ...extensions]}
+        extensions={extensions}
         theme={theme}
         slots={updatedSlots}
         {...props}
@@ -220,14 +229,18 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
 );
 
 export const MarkdownEditor = forwardRef<EditorView | null, TextEditorProps>(
-  ({ readonly, placeholder, theme = markdownTheme, slots, extensions = [], ...props }, forwardedRef) => {
+  ({ readonly, placeholder, theme = markdownTheme, slots, extensions: _extensions, ...props }, forwardedRef) => {
     const { themeMode } = useThemeContext();
     const updatedSlots = defaultsDeep({}, slots, defaultMarkdownSlots);
+    const extensions = useMemo(
+      () => [createMarkdownExtensions({ themeMode, placeholder }), ...(_extensions ?? [])],
+      [themeMode, placeholder, _extensions],
+    );
     return (
       <BaseTextEditor
         ref={forwardedRef}
         readonly={readonly}
-        extensions={[createMarkdownExtensions({ themeMode, placeholder }), ...extensions]}
+        extensions={extensions}
         theme={theme}
         slots={updatedSlots}
         {...props}

package/src/components/TextEditor/automerge.stories.tsx

@@ -8,7 +8,7 @@ import { BroadcastChannelNetworkAdapter } from '@automerge/automerge-repo-networ
 import '@preact/signals-react';
 import { EditorView } from '@codemirror/view'; // Register react integration.
 import get from 'lodash.get';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { type Prop } from '@dxos/automerge/automerge';
 import { Repo, type DocHandle } from '@dxos/automerge/automerge-repo';
@@ -37,17 +37,20 @@ type EditorProps = {
 };
 
 const Editor = ({ handle, path = ['text'] }: EditorProps) => {
-  const { parentRef } = useTextEditor({
-    autoFocus: true,
-    doc: get(handle.docSync()!, path),
-    extensions: [
-      //
+  const extensions = useMemo(
+    () => [
       EditorView.baseTheme(defaultTheme),
       EditorView.editorAttributes.of({ class: 'p-2 bg-white' }),
       createBasicBundle({ placeholder: 'Type here...' }),
       automerge({ handle, path }),
       awareness(),
     ],
+    [handle, path],
+  );
+  const { parentRef } = useTextEditor({
+    autoFocus: true,
+    doc: get(handle.docSync()!, path),
+    extensions,
   });
 
   return <div ref={parentRef} />;

package/src/components/TextEditor/hooks.stories.tsx

@@ -4,27 +4,25 @@
 
 import '@dxosTheme';
 
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 
-import { useThemeContext } from '@dxos/react-ui';
+import { Toolbar as NaturalToolbar, Select, useThemeContext } from '@dxos/react-ui';
 import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor } from './TextEditor';
 import {
-  code,
+  type EditorMode,
+  EditorModes,
+  decorateMarkdown,
   createMarkdownExtensions,
   formatting,
-  heading,
-  hr,
   image,
-  link,
   table,
-  tasklist,
   useFormattingState,
 } from '../../extensions';
 import { createDataExtensions, createThemeExtensions, useActionHandler, useTextEditor } from '../../hooks';
-import { editorFillLayoutEditor, editorFillLayoutRoot, editorWithToolbarLayout } from '../../styles';
+import { editorFillLayoutEditor, editorWithToolbarLayout } from '../../styles';
 import { markdownTheme } from '../../themes';
 import translations from '../../translations';
 import { Toolbar } from '../Toolbar';
@@ -45,54 +43,78 @@ type StoryProps = {
 const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
   const { themeMode } = useThemeContext();
   const [formattingState, trackFormatting] = useFormattingState();
-  const { parentRef, view } = useTextEditor({
-    autoFocus,
-    doc,
-    extensions: [
-      //
+  const [editorMode, setEditorMode] = useState<EditorMode>('default');
+  const extensions = useMemo(
+    () => [
+      editorMode ? EditorModes[editorMode] : [],
       createDataExtensions({ readonly }),
       createThemeExtensions({
         themeMode,
         theme: markdownTheme,
         slots: {
-          editor: { className: editorFillLayoutEditor },
+          content: { className: '!p-4' },
         },
       }),
       // TODO(burdon): Move lineWrapping.
       createMarkdownExtensions({ placeholder, lineWrapping: true }),
       // TODO(burdon): Move into markdown bundle (with React callbacks).
-      code(),
+      decorateMarkdown(),
       formatting(),
-      heading(),
-      hr(),
       image(),
-      link(),
       table(),
-      tasklist(),
       trackFormatting,
     ],
-  });
+    [editorMode, themeMode, placeholder, trackFormatting, readonly],
+  );
+  const { parentRef, view } = useTextEditor({ autoFocus, doc, extensions });
 
   const handleAction = useActionHandler(view);
 
-  // FIXME This doesn't update the state on view changes. Also not
-  // sure if view is even guaranteed to exist at this point.
+  // TODO(marijn) This doesn't update the state on view changes.
+  //  Also not sure if view is even guaranteed to exist at this point.
   return (
     <div role='none' className={mx('fixed inset-0', editorWithToolbarLayout)}>
       <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
         <Toolbar.Markdown />
+        <EditorModeToolbar editorMode={editorMode} setEditorMode={setEditorMode} />
       </Toolbar.Root>
       <div role='none' className='overflow-y-auto'>
-        <div
-          role='textbox'
-          className={mx(textBlockWidth, attentionSurface, editorFillLayoutRoot, 'p-4')}
-          ref={parentRef}
-        />
+        <div role='textbox' className={mx(textBlockWidth, attentionSurface, editorFillLayoutEditor)} ref={parentRef} />
       </div>
     </div>
   );
 };
 
+const EditorModeToolbar = ({
+  editorMode,
+  setEditorMode,
+}: {
+  editorMode: EditorMode;
+  setEditorMode: (mode: EditorMode) => void;
+}) => {
+  return (
+    <Select.Root value={editorMode} onValueChange={(value) => setEditorMode(value as EditorMode)}>
+      <NaturalToolbar.Button asChild>
+        <Select.TriggerButton variant='ghost'>{editorMode}</Select.TriggerButton>
+      </NaturalToolbar.Button>
+      <Select.Portal>
+        <Select.Content>
+          <Select.ScrollUpButton />
+          <Select.Viewport>
+            {['default', 'vim'].map((mode) => (
+              <Select.Option key={mode} value={mode}>
+                {mode}
+              </Select.Option>
+            ))}
+          </Select.Viewport>
+          <Select.ScrollDownButton />
+          <Select.Arrow />
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+};
+
 export default {
   title: 'react-ui-editor/useTextEditor',
   component: TextEditor,

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -14,13 +14,11 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
 import {
-  code,
+  decorateMarkdown,
   comments,
   formatting,
-  heading,
   image,
   table,
-  tasklist,
   useComments,
   useFormattingState,
 } from '../../extensions';
@@ -39,7 +37,7 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
   const [formattingState, formattingObserver] = useFormattingState();
   const extensions = useMemo(
     () => [
-      code(),
+      decorateMarkdown(),
       comments({
         onCreate: ({ cursor }) => {
           const id = PublicKey.random().toHex();
@@ -48,10 +46,8 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
         },
       }),
       formatting(),
-      heading(),
       image(),
       table(),
-      tasklist(),
       formattingObserver,
     ],
     [],
@@ -76,8 +72,9 @@ const Story: FC<{ id?: string; content: string }> = ({ id = 'test', content }) =
         model={model}
         extensions={extensions}
         slots={{
-          root: { className: mx(textBlockWidth, editorFillLayoutRoot, 'pli-2') },
+          root: { className: mx(textBlockWidth, editorFillLayoutRoot) },
           editor: { className: editorFillLayoutEditor },
+          content: { className: '!pli-2' },
         }}
       />
     </div>

package/src/components/Toolbar/Toolbar.tsx

@@ -233,7 +233,6 @@ const markdownBlocks: ButtonProps[] = [
     type: 'codeblock',
     Icon: CodeBlock,
     getState: (state) => state.blockType === 'codeblock',
-    disabled: (state) => !state.blankLine,
   },
   {
     type: 'table',

package/src/extensions/cursor-line-margin.ts

@@ -0,0 +1,92 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// Based upon @acheronfail’s implementation, fetched 16 Feb 2024
+// https://discuss.codemirror.net/t/cursorscrollmargin-for-v6/7448/5
+
+import { type EditorState, type Extension, Facet, Transaction } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+/**
+ * Number of lines above/below the cursor to keep visible in the viewport.
+ * Defaults to 3.
+ */
+export const cursorLineMarginFacet = Facet.define<number, number>({
+  combine: (input) => input[0] ?? 3,
+});
+
+const annotation = 'cursorLineMargin';
+const lineAtPos = (s: EditorState, pos: number) => s.doc.lineAt(pos).number;
+// seems to the best approximation of CM5's `cursorScrollMargin`
+// https://discuss.codemirror.net/t/cursorscrollmargin-for-v6/7448
+export const cursorLineMargin: Extension = EditorView.updateListener.of(
+  ({ transactions, state, selectionSet, startState, view }) => {
+    // make sure we don't trigger an infinite loop and ignore our own changes
+    if (transactions.length < 1 || transactions.some((tr) => tr.isUserEvent(annotation))) {
+      return;
+    }
+
+    const s = state;
+    const { main } = s.selection;
+    const cursorLineMargin = s.facet(cursorLineMarginFacet);
+
+    // editor rect
+    const rect = view.dom.getBoundingClientRect();
+    // top and bottom pixel positions of the visible region of the editor
+    const viewportTop = rect.top - view.documentTop;
+    const viewportBottom = rect.bottom - view.documentTop;
+
+    // line with main selection
+    const mainLine = lineAtPos(s, main.head);
+    // top most visible line
+    const _visTopLine = lineAtPos(s, view.lineBlockAtHeight(viewportTop).from);
+
+    // bottom most visible line
+    // NOTE: calculating this is slightly more complex - if the editor is
+    // larger than all the lines in it, and the `scrollPastEnd()` extension is
+    // enabled, then we need to calculate where the bottom most visible line
+    // should be if it extended all the way to the bottom of the editor
+    const botLineBlk = view.lineBlockAtHeight(viewportBottom);
+    const visBotLineDoc = lineAtPos(s, Math.min(botLineBlk.to, s.doc.length));
+    const visBotLine =
+      botLineBlk.bottom >= viewportBottom
+        ? visBotLineDoc
+        : visBotLineDoc + Math.floor((viewportBottom - botLineBlk.bottom) / view.defaultLineHeight);
+
+    // const needsScrollTop = mainLine <= visTopLine + cursorLineMargin;
+    const needsScrollTop = false;
+    const needsScrollBot = mainLine >= visBotLine - cursorLineMargin;
+
+    // the scroll margins are overlapping
+    if (needsScrollTop && needsScrollBot) {
+      console.warn('is cursorScrollMargin too large for the editor size?');
+      return;
+    }
+
+    // no need to scroll, we're in between scroll regions
+    if (!needsScrollTop && !needsScrollBot) {
+      return;
+    }
+
+    // if we're within the margin, but moving the other way, then don't scroll
+    if (selectionSet) {
+      const { head } = startState.selection.main;
+      const oldMainLine = lineAtPos(startState, head);
+      if (needsScrollTop && oldMainLine < mainLine) {
+        return;
+      }
+      if (needsScrollBot && oldMainLine > mainLine) {
+        return;
+      }
+    }
+
+    view.dispatch({
+      annotations: Transaction.userEvent.of(annotation),
+      effects: EditorView.scrollIntoView(s.selection.main.head, {
+        y: needsScrollTop ? 'start' : 'end',
+        yMargin: view.defaultLineHeight * cursorLineMargin,
+      }),
+    });
+  },
+);