@dxos/react-ui-editor 0.4.3 → 0.4.4-main.20c0bd9

package/src/extensions/markdown/code.ts

@@ -23,42 +23,53 @@ const styles = EditorView.baseTheme({
   '& .cm-code': {
     fontFamily: getToken('fontFamily.mono', []).join(','),
   },
-  '& .cm-codeblock': {
-    width: '100%',
+  '& .cm-codeblock-line': {
     paddingInline: '1rem !important',
+  },
+
+  '& .cm-codeblock-end': {
+    display: 'inline-block',
+    width: '100%',
     position: 'relative',
     '&::after': {
-      content: '""',
       position: 'absolute',
       inset: 0,
-    },
-  },
-  '&light .cm-codeblock': {
-    '&::after': {
-      background: getToken('extend.semanticColors.input.light'),
-      mixBlendMode: 'darken',
-    },
-  },
-  '&dark .cm-codeblock': {
-    '&::after': {
-      background: getToken('extend.semanticColors.input.dark'),
-      mixBlendMode: 'lighten',
+      content: '""',
     },
   },
   '& .cm-codeblock-first': {
-    display: 'inline-block',
     '&::after': {
       borderTopLeftRadius: '.5rem',
       borderTopRightRadius: '.5rem',
     },
   },
   '& .cm-codeblock-last': {
-    display: 'inline-block',
     '&::after': {
       borderBottomLeftRadius: '.5rem',
       borderBottomRightRadius: '.5rem',
     },
   },
+
+  '&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line': {
+    background: getToken('extend.semanticColors.input.light'),
+    mixBlendMode: 'darken',
+  },
+  '&dark .cm-codeblock-line, &dark .cm-activeLine.cm-codeblock-line': {
+    background: getToken('extend.semanticColors.input.dark'),
+    mixBlendMode: 'lighten',
+  },
+  '&light .cm-codeblock-first, &light .cm-codeblock-last': {
+    mixBlendMode: 'darken',
+    '&::after': {
+      background: getToken('extend.semanticColors.input.light'),
+    },
+  },
+  '&dark .cm-codeblock-first, &dark .cm-codeblock-last': {
+    mixBlendMode: 'lighten',
+    '&::after': {
+      background: getToken('extend.semanticColors.input.dark'),
+    },
+  },
 });
 
 // TODO(burdon): Start from EditorView.lineBlockAt(pos).
@@ -68,7 +79,10 @@ const getLineRange = (lines: BlockInfo[], from: number, to: number) => {
   return [start, end];
 };
 
-// TODO(burdon): Add copy to clipboard widget.
+/**
+ * Widget for first/last line of code block (read-only).
+ */
+// TODO(burdon): Add copy-to-clipboard button.
 class LineWidget extends WidgetType {
   constructor(private readonly _className: string) {
     super();
@@ -82,10 +96,8 @@ class LineWidget extends WidgetType {
   }
 }
 
-const top = new LineWidget('cm-codeblock-first');
-const bottom = new LineWidget('cm-codeblock-last');
-
-// TODO(burdon): Selection isn't visible unless multiline (e.g., can't highlight word).
+const top = new LineWidget('cm-codeblock-end cm-codeblock-first');
+const bottom = new LineWidget('cm-codeblock-end cm-codeblock-last');
 
 const buildDecorations = (view: EditorView): DecorationSet => {
   const builder = new RangeSetBuilder<Decoration>();
@@ -98,11 +110,11 @@ const buildDecorations = (view: EditorView): DecorationSet => {
       enter: (node) => {
         if (node.name === 'FencedCode') {
           // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
-          const edit = !view.state.readOnly && cursor >= node.from && cursor <= node.to;
+          const editing = !view.state.readOnly && cursor >= node.from && cursor <= node.to;
           const range = getLineRange(blocks, node.from, node.to);
           for (let i = range[0]; i <= range[1]; i++) {
             const block = blocks[i];
-            if (!edit && (i === range[0] || i === range[1])) {
+            if (!editing && (i === range[0] || i === range[1])) {
               builder.add(block.from, block.to, Decoration.replace({ widget: i === range[0] ? top : bottom }));
             } else {
               builder.add(
@@ -110,7 +122,7 @@ const buildDecorations = (view: EditorView): DecorationSet => {
                 block.from,
                 Decoration.line({
                   class: mx(
-                    'cm-code cm-codeblock',
+                    'cm-code cm-codeblock-line',
                     i === range[0] && 'cm-codeblock-first',
                     i === range[1] && 'cm-codeblock-last',
                   ),

package/src/extensions/markdown/formatting.test.ts

@@ -370,7 +370,7 @@ describe('removeBlockquote', () => {
 });
 
 describe('addCodeblock', () => {
-  testCommand('add a code block to a blank line', '{}', addCodeblock, '```{}\n```');
+  testCommand('add a code block to a blank line', '{}', addCodeblock, '```{}\n\n```');
 
   testCommand(
     'can turn a paragraph into a code block',

package/src/extensions/markdown/formatting.ts

@@ -356,6 +356,7 @@ const snippets = {
     [
       //
       '```#{}',
+      '',
       '```',
     ].join('\n'),
   ),

package/src/index.ts

@@ -11,6 +11,12 @@ export { Doc, YText, YXmlFragment } from '@dxos/text-model';
 export * from './components';
 export * from './extensions';
 export * from './hooks';
-export { getToken, editorWithToolbarLayout } from './styles';
+export {
+  getToken,
+  editorWithToolbarLayout,
+  editorFillLayoutEditor,
+  editorFillLayoutRoot,
+  editorHalfViewportOverscrollContent,
+} from './styles';
 export * from './themes';
 export * from './util';

package/src/styles/layout.ts

@@ -3,4 +3,9 @@
 //
 
 export const editorWithToolbarLayout =
-  'fixed inset-0 grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden';
+  'grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden';
+
+export const editorFillLayoutRoot = 'min-bs-full grid';
+export const editorFillLayoutEditor = 'min-bs-full';
+
+export const editorHalfViewportOverscrollContent = 'after:block after:min-bs-[50dvh] after:pointer-events-none';