@dxos/react-ui-editor 0.4.4 → 0.4.5-main.181e1ed

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/extensions/markdown/formatting.test.ts

@@ -101,6 +101,8 @@ describe('setHeading', () => {
   testCommand('can add a heading inside block markup', '> - {one\n> - two}\n', setHeading(1), '> - # one\n> - # two\n');
 
   testCommand('can remove a heading inside block markup', '1. # one{}', setHeading(0), '1. one');
+
+  testCommand('can add a heading to a blank line', 'one\n\n{}', setHeading(1), 'one\n\n# {}');
 });
 
 describe('addStyle', () => {
@@ -158,6 +160,8 @@ describe('addStyle', () => {
     em,
     '*[one {two](x) ![three} four](y)* five',
   );
+
+  testCommand('can add a style to an empty line', '{}', em, '*{}*');
 });
 
 describe('removeStyle', () => {
@@ -188,6 +192,15 @@ describe('removeStyle', () => {
   );
 
   testCommand('can shrink existing styles', '*one {two three} four*', em, '*one* {two three} *four*');
+
+  testCommand('can remove strong from a partially emphasized text', '**{one*two*}**', str, '{one*two*}');
+
+  testCommand(
+    'can remove strong from a partially emphasized text with markers outside',
+    '***{o*ne*two}***',
+    str,
+    '*{o*ne*two}*',
+  );
 });
 
 describe('addLink', () => {
@@ -284,6 +297,8 @@ describe('addList', () => {
   );
 
   testCommand("doesn't renumber lists with a different parent", '> one{}\n\n1. two', ordered, '> 1. one\n\n1. two');
+
+  testCommand('can add a list to an empty line', '{}', ordered, '1. {}');
 });
 
 describe('removeList', () => {
@@ -345,6 +360,8 @@ describe('addBlockquote', () => {
     addBlockquote,
     '> one\n> two\n>\n> # three\n\nfour',
   );
+
+  testCommand('can add a blockquote to an empty line', '{}', addBlockquote, '>{}');
 });
 
 describe('removeBlockquote', () => {

package/src/extensions/markdown/formatting.ts

@@ -94,6 +94,7 @@ export const setHeading =
     const changes: ChangeSpec[] = [];
     let prevBlock = -1;
     for (const range of ranges) {
+      let sawBlock = false;
       syntaxTree(state).iterate({
         from: range.from,
         to: range.to,
@@ -101,6 +102,7 @@ export const setHeading =
           if (!Object.hasOwn(Textblocks, node.name) || prevBlock === node.from) {
             return;
           }
+          sawBlock = true;
           prevBlock = node.from;
           const blockType = Textblocks[node.name];
           const isHeading = /heading(\d)/.exec(blockType);
@@ -129,13 +131,25 @@ export const setHeading =
           }
         },
       });
+      let line;
+      if (!sawBlock && range.empty && level > 0 && !/\S/.test((line = state.doc.lineAt(range.from)).text)) {
+        changes.push({ from: line.from, to: line.to, insert: '#'.repeat(level) + ' ' });
+      }
     }
 
     if (!changes.length) {
       return false;
     }
 
-    dispatch(state.update({ changes, userEvent: 'format.setHeading', scrollIntoView: true }));
+    const changeSet = state.changes(changes);
+    dispatch(
+      state.update({
+        changes: changeSet,
+        selection: state.selection.map(changeSet, 1),
+        userEvent: 'format.setHeading',
+        scrollIntoView: true,
+      }),
+    );
     return true;
   };
 
@@ -174,8 +188,8 @@ export const setStyle =
       const changesAtEnd: ChangeSpec[] = [];
       let blockStart = -1;
       let blockEnd = -1;
-      let startCovered: boolean | 'adjacent' = false;
-      let endCovered: boolean | 'adjacent' = false;
+      let startCovered: boolean | { from: number; to: number } = false;
+      let endCovered: boolean | { from: number; to: number } = false;
       let { from, to } = range;
       // Iterate the selected range. For each textblock, determine a
       // start and end position, the overlap of the selected range and
@@ -218,10 +232,16 @@ export const setStyle =
             // by this.
             if (markType === type) {
               if (openEnd <= from && closeStart >= from) {
-                startCovered = openEnd === from ? 'adjacent' : true;
+                startCovered =
+                  !enable && openEnd === skipMarkers(from, node.node, -1, openEnd)
+                    ? { from: node.from, to: openEnd }
+                    : true;
               }
               if (openEnd <= to && closeStart >= to) {
-                endCovered = closeStart === to ? 'adjacent' : true;
+                endCovered =
+                  !enable && closeStart === skipMarkers(to, node.node, 1, closeStart)
+                    ? { from: closeStart, to: node.to }
+                    : true;
               }
             }
             // Marks of the same type in range, or any mark if we're
@@ -263,13 +283,13 @@ export const setStyle =
                 changes.push({ from: rangeEnd, insert: marker });
               }
             } else {
-              if (startCovered === 'adjacent') {
-                changes.push({ from: from - marker.length, to: from });
+              if (typeof startCovered === 'object') {
+                changes.push(startCovered);
               } else if (startCovered) {
                 changes.push({ from: skipSpaces(rangeStart, state.doc, -1, blockStart), insert: marker });
               }
-              if (endCovered === 'adjacent') {
-                changes.push({ from: to, to: to + marker.length });
+              if (typeof endCovered === 'object') {
+                changes.push(endCovered);
               } else if (endCovered) {
                 changes.push({ from: skipSpaces(rangeEnd, state.doc, 1, blockEnd), insert: marker });
               }
@@ -277,6 +297,12 @@ export const setStyle =
           }
         },
       });
+      if (blockStart < 0 && range.empty && enable && !/\S/.test(state.doc.lineAt(range.from).text)) {
+        return {
+          changes: { from: range.head, insert: marker + marker },
+          range: EditorSelection.cursor(range.head + marker.length),
+        };
+      }
       const changeSet = state.changes(changes.concat(changesAtEnd));
       return {
         changes: changeSet,
@@ -350,6 +376,20 @@ const skipSpaces = (pos: number, doc: Text, dir: -1 | 1, limit?: number) => {
   return pos;
 };
 
+const skipMarkers = (pos: number, tree: SyntaxNode, dir: -1 | 1, limit?: number) => {
+  for (;;) {
+    const next = tree.resolve(pos, dir);
+    if (!IgnoreInline.has(next.name)) {
+      return pos;
+    }
+    const moveTo = dir < 0 ? next.from : next.to;
+    if (limit != null && (dir < 0 ? moveTo < limit : moveTo > limit)) {
+      return pos;
+    }
+    pos = moveTo;
+  }
+};
+
 // TODO(burdon): Define and trigger snippets for codeblock, table, etc.
 const snippets = {
   codeblock: snippet(
@@ -515,7 +555,6 @@ export const addLink: StateCommand = ({ state, dispatch }) => {
 // Lists
 //
 
-// TODO(burdon): Cursor is positioned incorrectly.
 export const addList =
   (type: List): StateCommand =>
   ({ state, dispatch }) => {
@@ -654,7 +693,15 @@ export const addList =
       }
     }
 
-    dispatch(state.update({ changes, userEvent: 'format.list.add', scrollIntoView: true }));
+    const changeSet = state.changes(changes);
+    dispatch(
+      state.update({
+        changes: changeSet,
+        selection: state.selection.map(changeSet, 1),
+        userEvent: 'format.list.add',
+        scrollIntoView: true,
+      }),
+    );
     return true;
   };
 
@@ -751,6 +798,7 @@ export const setBlockquote =
     const lines: Line[] = [];
     let lastBlock = -1;
     for (const { from, to } of state.selection.ranges) {
+      const sawBlock = false;
       syntaxTree(state).iterate({
         from,
         to,
@@ -786,6 +834,10 @@ export const setBlockquote =
           }
         },
       });
+      let line;
+      if (!sawBlock && enable && from === to && !/\S/.test((line = state.doc.lineAt(from)).text)) {
+        lines.push(line);
+      }
     }
 
     const changes: ChangeSpec[] = [];
@@ -803,9 +855,11 @@ export const setBlockquote =
       return false;
     }
 
+    const changeSet = state.changes(changes);
     dispatch(
       state.update({
-        changes,
+        changes: changeSet,
+        selection: state.selection.map(changeSet, 1),
         userEvent: enable ? 'format.blockquote.add' : 'format.blockquote.remove',
         scrollIntoView: true,
       }),

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';