@dxos/react-ui-editor 0.6.11-staging.e6894a4 → 0.6.11

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',
   },
 
   /**
@@ -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',