@dxos/react-ui-editor 0.4.4-next.e0df51e → 0.4.5-main.2d76d4e

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

@@ -4,14 +4,16 @@
 
 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 {
+  type EditorMode,
+  EditorModes,
   code,
   createMarkdownExtensions,
   formatting,
@@ -24,7 +26,7 @@ import {
   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,17 +47,16 @@ 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.
@@ -71,28 +72,57 @@ const Story = ({ autoFocus, placeholder, doc, readonly }: StoryProps) => {
       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

@@ -76,8 +76,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/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';

package/src/hooks/useTextEditor.ts

@@ -34,6 +34,7 @@ export type UseTextEditor = {
 /**
  * Hook for creating editor.
  */
+// TODO(wittjosiah): Does not work in strict mode.
 export const useTextEditor = ({
   autoFocus,
   scrollTo,
@@ -45,7 +46,9 @@ export const useTextEditor = ({
   const onUpdate = useRef<() => void>();
   const [view, setView] = useState<EditorView>();
   const parentRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
+    let view: EditorView;
     if (parentRef.current) {
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
       const state = EditorState.create({
@@ -64,7 +67,7 @@ export const useTextEditor = ({
       });
 
       // https://codemirror.net/docs/ref/#view.EditorViewConfig
-      const view = new EditorView({
+      view = new EditorView({
         parent: parentRef.current,
         scrollTo,
         state,
@@ -84,7 +87,8 @@ export const useTextEditor = ({
     return () => {
       view?.destroy();
     };
-  }, [parentRef]);
+    // TODO(wittjosiah): Does `parentRef` ever change? Only `.current` changes?
+  }, [parentRef, extensions]);
 
   useEffect(() => {
     if (view) {

package/src/styles/layout.ts

@@ -5,7 +5,8 @@
 export const editorWithToolbarLayout =
   'grid grid-cols-1 grid-rows-[min-content_1fr] data-[toolbar=disabled]:grid-rows-[1fr] justify-center content-start overflow-hidden';
 
-export const editorFillLayoutRoot = 'min-bs-full grid';
-export const editorFillLayoutEditor = 'min-bs-full';
+export const editorFillLayoutRoot = 'bs-full overflow-hidden grid';
+export const editorFillLayoutEditor =
+  'bs-full overflow-hidden [&>.cm-scroller]:bs-full [&>.cm-scroller]:overflow-y-auto';
 
 export const editorHalfViewportOverscrollContent = 'after:block after:min-bs-[50dvh] after:pointer-events-none';