@dxos/react-ui-editor 0.6.11-staging.e6894a4 → 0.6.12-main.15a606f

package/src/extensions/markdown/decorate.ts

@@ -17,6 +17,19 @@ import { table } from './table';
 import { theme, type HeadingLevel } from '../../styles';
 import { wrapWithCatch } from '../util';
 
+/**
+ * Unicode characters.
+ * NOTE: Depends on font.
+ * https://www.compart.com/en/unicode (nice resource).
+ * https://en.wikipedia.org/wiki/List_of_Unicode_characters
+ */
+const Unicode = {
+  emDash: '\u2014',
+  bullet: '\u2022',
+  bulletSmall: '\u2219',
+  bulletSquare: '\u2b1d',
+};
+
 //
 // Widgets
 //
@@ -67,12 +80,18 @@ class CheckboxWidget extends WidgetType {
       input.setAttribute('disabled', 'true');
     } else {
       input.onmousedown = (event: Event) => {
-        const pos = view.posAtDOM(span);
-        const text = view.state.sliceDoc(pos, pos + 3);
-        if (text === (this._checked ? '[x]' : '[ ]')) {
+        // Could be beginning of line.
+        const line = view.state.doc.lineAt(view.posAtDOM(span));
+        const text = view.state.sliceDoc(line.from, line.to);
+        const match = text.match(/^\s*- (\[[xX ]]).*/);
+        if (match) {
+          const [, checked] = match;
+          const pos = line.from + text.indexOf(checked);
+          this._checked = checked !== '[ ]';
           view.dispatch({
             changes: { from: pos + 1, to: pos + 2, insert: this._checked ? ' ' : 'x' },
           });
+
           event.preventDefault();
         }
       };
@@ -246,17 +265,20 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       }
 
       case 'ListItem': {
+        const line = state.doc.lineAt(node.from);
+
         // Set indentation.
         const list = getCurrentListLevel();
         const width = list.type === 'OrderedList' ? orderedListIndentationWidth : bulletListIndentationWidth;
         const offset = ((list.level ?? 0) + 1) * width;
-        const line = state.doc.lineAt(node.from);
         if (node.from === line.to - 1) {
           // Abort if only the hyphen is typed.
           return false;
         }
 
-        // Add line decoration for continuation indent.
+        // Add line decoration for the continuation indent.
+        // TODO(burdon): Bug if indentation is more than one indentation unit (e.g., 4 spaces) from the previous line.
+
         deco.add(
           line.from,
           line.from,
@@ -268,32 +290,26 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
           }),
         );
 
-        // Remove indentation spaces.
-        const text = state.doc.sliceString(line.from, node.to);
-        const whitespace = text.match(/^ */)?.[0].length ?? 0;
-        if (whitespace) {
-          atomicDeco.add(line.from, line.from + whitespace, hide);
-        }
-
         break;
       }
 
       case 'ListMark': {
+        const list = getCurrentListLevel();
+
         // Look-ahead for task marker.
-        // NOTE: Requires space to exist (otherwise processes as a link).
+        // NOTE: Requires space to exist (otherwise the text is parsed as the start of a link).
         const next = tree.resolve(node.to + 1, 1);
         if (next?.name === 'TaskMarker') {
-          atomicDeco.add(node.from, node.to + 1, hide);
           break;
         }
 
-        const list = getCurrentListLevel();
-
         // TODO(burdon): Option to make hierarchical; or a), i), etc.
-        const label = list.type === 'OrderedList' ? `${++list.number}.` : '•';
+        const label = list.type === 'OrderedList' ? `${++list.number}.` : Unicode.bulletSmall;
+        const line = state.doc.lineAt(node.from);
+        const to = state.doc.sliceString(node.to, node.to + 1) === ' ' ? node.to + 1 : node.to;
         atomicDeco.add(
-          node.from,
-          node.to + 1,
+          line.from,
+          to,
           Decoration.replace({
             widget: new TextWidget(
               label,
@@ -305,10 +321,11 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       }
 
       case 'TaskMarker': {
-        if (!editingRange(state, node, focus)) {
-          const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
-          atomicDeco.add(node.from, node.to + 1, checked ? checkedTask : uncheckedTask);
-        }
+        const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
+        // Check if the next character is a space and if so, include it in the replacement.
+        const line = state.doc.lineAt(node.from);
+        const to = state.doc.sliceString(node.to, node.to + 1) === ' ' ? node.to + 1 : node.to;
+        atomicDeco.add(line.from, to, checked ? checkedTask : uncheckedTask);
         break;
       }
 

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

@@ -4,9 +4,7 @@
 
 import { markdownLanguage } from '@codemirror/lang-markdown';
 import { EditorState, type StateCommand } from '@codemirror/state';
-import { expect } from 'chai';
-
-import { describe, test } from '@dxos/test';
+import { describe, expect, test } from 'vitest';
 
 import {
   addBlockquote,

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

@@ -5,8 +5,7 @@
 // @ts-ignore
 import { testTree } from '@lezer/generator/test';
 import { parser } from '@lezer/markdown';
-
-import { describe, test } from '@dxos/test';
+import { describe, test } from 'vitest';
 
 describe('parser', () => {
   // test.only('list-mark', () => {

package/src/extensions/util/react.tsx

@@ -8,6 +8,21 @@ import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from '@dxos/react-ui';
 import { defaultTx } from '@dxos/react-ui-theme';
 
+export type ElementOptions = {
+  className?: string;
+};
+
+export const createElement = (tag: string, options?: ElementOptions, children?: ReactNode): HTMLElement => {
+  const el = document.createElement(tag);
+  if (options?.className) {
+    el.className = options.className;
+  }
+  if (children) {
+    el.append(...(Array.isArray(children) ? children : [children]));
+  }
+  return el;
+};
+
 export const renderRoot = (root: HTMLElement, node: ReactNode): HTMLElement => {
   createRoot(root).render(<ThemeProvider tx={defaultTx}>{node}</ThemeProvider>);
   return root;

package/src/hooks/useTextEditor.ts

@@ -17,7 +17,7 @@ import {
 } from 'react';
 
 import { log } from '@dxos/log';
-import { isNotFalsy, type MaybeFunction } from '@dxos/util';
+import { getProviderValue, isNotFalsy, type MaybeProvider } from '@dxos/util';
 
 import { createEditorStateTransaction, documentId, editorInputMode, type EditorSelection } from '../extensions';
 import { logChanges } from '../util';
@@ -57,13 +57,11 @@ let instanceCount = 0;
  * Hook for creating editor.
  */
 export const useTextEditor = (
-  props: MaybeFunction<UseTextEditorProps> = {},
+  props: MaybeProvider<UseTextEditorProps> = {},
   deps: DependencyList = [],
 ): UseTextEditor => {
   const { id, initialValue, extensions, autoFocus, scrollTo, selection, moveToEndOfLine, debug } =
-    useMemo<UseTextEditorProps>(() => {
-      return typeof props === 'function' ? props() : props;
-    }, deps ?? []);
+    useMemo<UseTextEditorProps>(() => getProviderValue(props), deps ?? []);
 
   // NOTE: Increments by 2 in strict mode.
   const [instanceId] = useState(() => `text-editor-${++instanceCount}`);

package/src/styles/markdown.ts

@@ -16,8 +16,6 @@ const headings: Record<HeadingLevel, string> = {
   6: 'text-md',
 };
 
-// TODO(burdon): Define theme as facet (used in multiple extensions).
-// TODO(burdon): Organize theme styles for widgets.
 export const theme = {
   mark: 'opacity-50',
   code: 'font-mono !no-underline text-neutral-700 dark:text-neutral-300',

package/src/styles/theme.ts

@@ -73,16 +73,19 @@ export const defaultTheme: ThemeStyles = {
    * NOTE: Gutters should have the same top margin as the content.
    */
   '.cm-gutters': {
-    background: 'unset',
+    background: 'var(--surface-bg)',
   },
   '.cm-gutter': {},
+  '.cm-gutter.cm-lineNumbers .cm-gutterElement': {
+    minWidth: '40px',
+    alignContent: 'center',
+  },
+  /**
+   * Height is set to match the corresponding line.
+   */
   '.cm-gutterElement': {
+    alignItems: 'center',
     fontSize: '16px',
-    lineHeight: 1.5,
-  },
-
-  '.cm-lineNumbers': {
-    minWidth: '36px',
   },
 
   /**
@@ -92,7 +95,7 @@ export const defaultTheme: ThemeStyles = {
     paddingInline: 0,
   },
   '.cm-activeLine': {
-    background: 'var(--dx-hoverSurface)',
+    background: 'var(--dx-cmActiveLine)',
   },
 
   /**
@@ -198,13 +201,14 @@ export const defaultTheme: ThemeStyles = {
    *   </div>
    * </div
    */
-  // TODO(burdon): Apply react-ui-theme or replace panel.
+  // TODO(burdon): Implement custom panel (with icon buttons).
   '.cm-panels': {},
   '.cm-panel': {
     fontFamily: fontBody,
-    backgroundColor: 'var(--dx-base)',
+    backgroundColor: 'var(--surface-bg)',
   },
   '.cm-panel input, .cm-panel button, .cm-panel label': {
+    color: 'var(--dx-subdued)',
     fontFamily: fontBody,
     fontSize: '14px',
     all: 'unset',

package/dist/types/src/extensions/automerge/automerge.spec.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=automerge.spec.d.ts.map

package/dist/types/src/extensions/automerge/automerge.spec.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"automerge.spec.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/automerge/automerge.spec.tsx"],"names":[],"mappings":""}

package/src/extensions/automerge/automerge.test.ts

@@ -1,13 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { expect } from 'chai';
-
-import { describe, test } from '@dxos/test';
-
-describe('Test', () => {
-  test('checks sanity', async () => {
-    expect(true).to.be.true;
-  });
-});