@dxos/react-ui-editor 0.4.5-main.f8d6c4e → 0.4.5

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;AAEhD,wBAkBE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,oBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;AAEhD,wBAoBE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.5-main.f8d6c4e",
+  "version": "0.4.5",
   "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/context": "0.4.5-main.f8d6c4e",
-    "@dxos/async": "0.4.5-main.f8d6c4e",
-    "@dxos/debug": "0.4.5-main.f8d6c4e",
-    "@dxos/automerge": "0.4.5-main.f8d6c4e",
-    "@dxos/display-name": "0.4.5-main.f8d6c4e",
-    "@dxos/echo-schema": "0.4.5-main.f8d6c4e",
-    "@dxos/invariant": "0.4.5-main.f8d6c4e",
-    "@dxos/log": "0.4.5-main.f8d6c4e",
-    "@dxos/react-async": "0.4.5-main.f8d6c4e",
-    "@dxos/react-ui": "0.4.5-main.f8d6c4e",
-    "@dxos/react-ui-theme": "0.4.5-main.f8d6c4e",
-    "@dxos/protocols": "0.4.5-main.f8d6c4e",
-    "@dxos/text-model": "0.4.5-main.f8d6c4e",
-    "@dxos/util": "0.4.5-main.f8d6c4e"
+    "@dxos/async": "0.4.5",
+    "@dxos/debug": "0.4.5",
+    "@dxos/automerge": "0.4.5",
+    "@dxos/context": "0.4.5",
+    "@dxos/echo-schema": "0.4.5",
+    "@dxos/display-name": "0.4.5",
+    "@dxos/protocols": "0.4.5",
+    "@dxos/invariant": "0.4.5",
+    "@dxos/log": "0.4.5",
+    "@dxos/react-ui": "0.4.5",
+    "@dxos/react-async": "0.4.5",
+    "@dxos/react-ui-theme": "0.4.5",
+    "@dxos/text-model": "0.4.5",
+    "@dxos/util": "0.4.5"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
@@ -65,7 +65,8 @@
     "@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",
@@ -76,20 +77,22 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.2.2",
-    "@dxos/echo-signals": "0.4.5-main.f8d6c4e",
-    "@dxos/config": "0.4.5-main.f8d6c4e",
-    "@dxos/echo-typegen": "0.4.5-main.f8d6c4e",
-    "@dxos/random": "0.4.5-main.f8d6c4e",
-    "@dxos/react-client": "0.4.5-main.f8d6c4e",
-    "@dxos/keyboard": "0.4.5-main.f8d6c4e",
-    "@dxos/react-ui": "0.4.5-main.f8d6c4e",
-    "@dxos/storybook-utils": "0.4.5-main.f8d6c4e"
+    "@dxos/config": "0.4.5",
+    "@dxos/echo-signals": "0.4.5",
+    "@dxos/echo-typegen": "0.4.5",
+    "@dxos/keyboard": "0.4.5",
+    "@dxos/react-client": "0.4.5",
+    "@dxos/random": "0.4.5",
+    "@dxos/storybook-utils": "0.4.5",
+    "@dxos/react-ui": "0.4.5"
   },
   "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.5-main.f8d6c4e"
+    "@dxos/react-client": "0.4.5"
   },
   "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(
@@ -173,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>
@@ -206,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}>
@@ -257,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 = {
@@ -281,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 />,
 };
@@ -289,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()]} />
   ),
 };
 
@@ -330,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())),
         }),
@@ -388,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/hooks.stories.tsx

@@ -14,19 +14,15 @@ import { TextEditor } from './TextEditor';
 import {
   type EditorMode,
   EditorModes,
-  code,
+  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';
@@ -56,20 +52,16 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         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],
@@ -87,11 +79,7 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
         <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>
   );

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

@@ -33,6 +33,7 @@ import {
   Select,
   type ThemedClassName,
   Toolbar as NaturalToolbar,
+  Tooltip,
   type ToolbarToggleGroupItemProps,
   useTranslation,
 } from '@dxos/react-ui';
@@ -41,6 +42,8 @@ import { getSize } from '@dxos/react-ui-theme';
 import { type Formatting } from '../../extensions';
 import { translationKey } from '../../translations';
 
+const tooltipProps = { side: 'top' as const, classNames: 'z-10' };
+
 const HeadingIcons: { [key: string]: Icon } = {
   '0': Paragraph,
   '1': TextHOne,
@@ -112,10 +115,20 @@ type ToolbarButtonProps = ToolbarToggleGroupItemProps & { Icon: Icon };
 
 const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   return (
-    <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>
-      <Icon className={iconStyles} />
-      <span className='sr-only'>{children}</span>
-    </NaturalToolbar.ToggleGroupItem>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.ToggleGroupItem variant='ghost' {...props} classNames={buttonStyles}>
+          <Icon className={iconStyles} />
+          <span className='sr-only'>{children}</span>
+        </NaturalToolbar.ToggleGroupItem>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
   );
 };
 
@@ -129,40 +142,50 @@ const MarkdownHeading = () => {
   const value = header ? header[1] : blockType === 'paragraph' || !blockType ? '0' : undefined;
   const HeadingIcon = HeadingIcons[value ?? '0'];
   return (
-    <Select.Root
-      disabled={value === null}
-      value={value ?? '0'}
-      onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
-    >
-      <NaturalToolbar.Button asChild>
-        <Select.TriggerButton variant='ghost' classNames={buttonStyles}>
-          <span className='sr-only'>{t('heading label')}</span>
-          <HeadingIcon className={iconStyles} />
-        </Select.TriggerButton>
-      </NaturalToolbar.Button>
-      <Select.Portal>
-        <Select.Content>
-          <Select.ScrollUpButton />
-          <Select.Viewport>
-            <Select.Option value='0'>
-              <Paragraph className={iconStyles} />
-            </Select.Option>
-            {[1, 2, 3, 4, 5, 6].map((level) => (
-              <Select.Option key={level} value={String(level)}>
-                {level === 1 && <TextHOne className={iconStyles} />}
-                {level === 2 && <TextHTwo className={iconStyles} />}
-                {level === 3 && <TextHThree className={iconStyles} />}
-                {level === 4 && <TextHFour className={iconStyles} />}
-                {level === 5 && <TextHFive className={iconStyles} />}
-                {level === 6 && <TextHSix className={iconStyles} />}
+    <Tooltip.Root>
+      <Select.Root
+        disabled={value === null}
+        value={value ?? '0'}
+        onValueChange={(value) => onAction?.({ type: 'heading', data: parseInt(value) })}
+      >
+        <Tooltip.Trigger asChild>
+          <NaturalToolbar.Button asChild>
+            <Select.TriggerButton variant='ghost' classNames={buttonStyles}>
+              <span className='sr-only'>{t('heading label')}</span>
+              <HeadingIcon className={iconStyles} />
+            </Select.TriggerButton>
+          </NaturalToolbar.Button>
+        </Tooltip.Trigger>
+        <Select.Portal>
+          <Select.Content>
+            <Select.ScrollUpButton />
+            <Select.Viewport>
+              <Select.Option value='0'>
+                <Paragraph className={iconStyles} />
               </Select.Option>
-            ))}
-          </Select.Viewport>
-          <Select.ScrollDownButton />
-          <Select.Arrow />
-        </Select.Content>
-      </Select.Portal>
-    </Select.Root>
+              {[1, 2, 3, 4, 5, 6].map((level) => (
+                <Select.Option key={level} value={String(level)}>
+                  {level === 1 && <TextHOne className={iconStyles} />}
+                  {level === 2 && <TextHTwo className={iconStyles} />}
+                  {level === 3 && <TextHThree className={iconStyles} />}
+                  {level === 4 && <TextHFour className={iconStyles} />}
+                  {level === 5 && <TextHFive className={iconStyles} />}
+                  {level === 6 && <TextHSix className={iconStyles} />}
+                </Select.Option>
+              ))}
+            </Select.Viewport>
+            <Select.ScrollDownButton />
+            <Select.Arrow />
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {t('heading label')}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
   );
 };
 
@@ -233,7 +256,6 @@ const markdownBlocks: ButtonProps[] = [
     type: 'codeblock',
     Icon: CodeBlock,
     getState: (state) => state.blockType === 'codeblock',
-    disabled: (state) => !state.blankLine,
   },
   {
     type: 'table',
@@ -277,15 +299,25 @@ const MarkdownExtended = () => {
   const { onAction } = useToolbarContext('MarkdownStyles');
   const { t } = useTranslation(translationKey);
   return (
-    <NaturalToolbar.Button
-      variant='ghost'
-      data-testid='editor.toolbar.comment'
-      onClick={() => onAction?.({ type: 'comment' })}
-      classNames={buttonStyles}
-    >
-      <ChatText className={iconStyles} />
-      <span className='sr-only'>{t('comment label')}</span>
-    </NaturalToolbar.Button>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.Button
+          variant='ghost'
+          data-testid='editor.toolbar.comment'
+          onClick={() => onAction?.({ type: 'comment' })}
+          classNames={buttonStyles}
+        >
+          <ChatText className={iconStyles} />
+          <span className='sr-only'>{t('comment label')}</span>
+        </NaturalToolbar.Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {t('comment label')}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
   );
 };
 

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,
+      }),
+    });
+  },
+);

package/src/extensions/index.ts

@@ -10,6 +10,7 @@ export * from './basic';
 export * from './blast';
 export * from './comments';
 export * from './cursor';
+export * from './cursor-line-margin';
 export * from './listener';
 export * from './markdown';
 export * from './mention';