@dxos/react-ui-editor 0.4.8-main.5f46a83 → 0.4.8-main.97e86fe

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -15,8 +15,12 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { Toolbar } from './Toolbar';
 import {
+  type Comment,
   decorateMarkdown,
   comments,
+  createBasicExtensions,
+  createDataExtensions,
+  createThemeExtensions,
   formattingKeymap,
   table,
   useComments,
@@ -24,15 +28,7 @@ import {
   createMarkdownExtensions,
   image,
 } from '../../extensions';
-import {
-  type Comment,
-  createBasicExtensions,
-  createDataExtensions,
-  createThemeExtensions,
-  useActionHandler,
-  useDocAccessor,
-  useTextEditor,
-} from '../../hooks';
+import { useActionHandler, useDocAccessor, useTextEditor } from '../../hooks';
 import translations from '../../translations';
 
 faker.seed(101);

package/src/extensions/automerge/automerge.stories.tsx

@@ -17,8 +17,9 @@ import { useThemeContext } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { automerge } from './automerge';
-import { createBasicExtensions, createThemeExtensions, useTextEditor } from '../../hooks';
+import { useTextEditor } from '../../hooks';
 import translations from '../../translations';
+import { createBasicExtensions, createThemeExtensions } from '../factories';
 
 const initialContent = 'Hello world!';
 

package/src/{hooks → extensions/awareness}/awareness-provider.ts

@@ -9,7 +9,7 @@ import { log } from '@dxos/log';
 import { type Space } from '@dxos/react-client/echo';
 import { type GossipMessage } from '@dxos/react-client/mesh';
 
-import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from '../extensions';
+import { type AwarenessInfo, type AwarenessPosition, type AwarenessProvider, type AwarenessState } from './awareness';
 
 type ProtocolMessage =
   | {

package/src/extensions/{awareness.ts → awareness/awareness.ts}

@@ -16,7 +16,7 @@ import {
 import { Event } from '@dxos/async';
 import { Context } from '@dxos/context';
 
-import { Cursor, type CursorConverter } from './cursor';
+import { Cursor, type CursorConverter } from '../cursor';
 
 export interface AwarenessProvider {
   remoteStateChange: Event<void>;

package/src/extensions/awareness/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './awareness';
+export * from './awareness-provider';

package/src/extensions/comments.ts

@@ -13,7 +13,7 @@ import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
 import { Cursor } from './cursor';
-import { type Comment, type Range } from '../hooks';
+import { type Comment, type Range } from './types';
 import { getToken } from '../styles';
 import { callbackWrapper } from '../util';
 

package/src/extensions/cursor.ts

@@ -4,7 +4,7 @@
 
 import { type EditorState, Facet } from '@codemirror/state';
 
-import type { Range } from '../hooks';
+import type { Range } from './types';
 
 /**
  * Converts indexes into the text document into stable peer-independent cursors.

package/src/{hooks/extension-utils.ts → extensions/factories.ts}

@@ -17,10 +17,9 @@ import {
   scrollPastEnd,
 } from '@codemirror/view';
 import defaultsDeep from 'lodash.defaultsdeep';
-import { useMemo } from 'react';
 
 import { generateName } from '@dxos/display-name';
-import { createDocAccessor, getTextContent, type TextObject, type DocAccessor } from '@dxos/echo-schema';
+import { type DocAccessor } from '@dxos/echo-schema';
 import { log } from '@dxos/log';
 import { type Space } from '@dxos/react-client/echo';
 import { type Identity } from '@dxos/react-client/halo';
@@ -28,8 +27,8 @@ import { type ThemeMode } from '@dxos/react-ui';
 import { type HuePalette, hueTokens } from '@dxos/react-ui-theme';
 import { hexToHue, isNotFalsy } from '@dxos/util';
 
-import { SpaceAwarenessProvider } from './awareness-provider';
-import { automerge, awareness } from '../extensions';
+import { automerge } from './automerge';
+import { awareness, SpaceAwarenessProvider } from './awareness';
 import { type ThemeStyles } from '../styles';
 import { defaultTheme } from '../themes';
 
@@ -117,9 +116,6 @@ const defaultSlots = {
   editor: {
     className: 'w-full bs-full',
   },
-  content: {
-    className: '!p-2',
-  },
 };
 
 export const createThemeExtensions = ({ theme, themeMode, slots: _slots }: ThemeExtensionsOptions = {}): Extension => {
@@ -169,17 +165,3 @@ export const createDataExtensions = ({ id, text, space, identity }: DataExtensio
 
   return extensions;
 };
-
-// TODO(burdon): Factor out.
-export const useDocAccessor = <T = any>(
-  text: TextObject,
-): { id: string; doc: string | undefined; accessor: DocAccessor<T> } => {
-  return useMemo(
-    () => ({
-      id: text.id,
-      doc: getTextContent(text),
-      accessor: createDocAccessor<T>(text),
-    }),
-    [text],
-  );
-};

package/src/extensions/index.ts

@@ -13,8 +13,10 @@ export * from './cursor';
 export * from './cursor-line-margin';
 export * from './doc';
 export * from './dnd';
+export * from './factories';
 export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
+export * from './types';
 export * from './typewriter';

package/src/extensions/markdown/decorate.ts

@@ -48,7 +48,7 @@ class CheckboxWidget extends WidgetType {
 
   override toDOM(view: EditorView) {
     const input = document.createElement('input');
-    input.className = 'cm-task-checkbox';
+    input.className = 'cm-task-checkbox ch-checkbox ch-focus-ring -mbs-0.5';
     input.type = 'checkbox';
     input.checked = this._checked;
     if (view.state.readOnly) {

package/src/{hooks/defs.ts → extensions/types.ts}

@@ -9,6 +9,7 @@ export type Range = {
 };
 
 // Persistent data structure.
+// TODO(burdon): Rename annotation?
 export type Comment = {
   id: string;
   cursor?: string;

package/src/hooks/index.ts

@@ -2,9 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './awareness-provider';
-export * from './defs';
-export * from './extension-utils';
-
 export * from './useActionHandler';
+export * from './useDocAccessor';
 export * from './useTextEditor';

package/src/hooks/useDocAccessor.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { createDocAccessor, type DocAccessor, getTextContent, type TextObject } from '@dxos/echo-schema';
+
+// TODO(burdon): Factor out.
+export const useDocAccessor = <T = any>(
+  text: TextObject,
+): { id: string; doc: string | undefined; accessor: DocAccessor<T> } => {
+  return useMemo(
+    () => ({
+      id: text.id,
+      doc: getTextContent(text),
+      accessor: createDocAccessor<T>(text),
+    }),
+    [text],
+  );
+};

package/src/hooks/useTextEditor.stories.tsx

@@ -10,10 +10,10 @@ import { Toolbar as NaturalToolbar, Select, useThemeContext, Tooltip } from '@dx
 import { attentionSurface, mx, textBlockWidth } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { createBasicExtensions, createThemeExtensions } from './extension-utils';
 import { useActionHandler } from './useActionHandler';
 import { useTextEditor } from './useTextEditor';
 import { Toolbar } from '../components';
+import { createBasicExtensions, createThemeExtensions } from '../extensions';
 import {
   type EditorMode,
   EditorModes,

package/dist/types/src/extensions/awareness.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"awareness.d.ts","sourceRoot":"","sources":["../../../../src/extensions/awareness.ts"],"names":[],"mappings":"AAIA,OAAO,EAAc,KAAK,EAAE,KAAK,SAAS,EAAwB,MAAM,mBAAmB,CAAC;AAC5F,OAAO,EAEL,KAAK,aAAa,EAClB,UAAU,EACV,KAAK,WAAW,EAEhB,KAAK,UAAU,EAEhB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAE/B,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IAEd,eAAe,IAAI,cAAc,EAAE,CAAC;IACpC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,GAAG,IAAI,CAAC;CACvD;AAYD,eAAO,MAAM,iBAAiB,6CAE5B,CAAC;AAKH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,oCAA+B,SAQpD,CAAC;AAEF;;GAEG;AACH,qBAAa,yBAA0B,YAAW,WAAW;IACpD,WAAW,EAAE,aAAa,CAAmB;IAEpD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAiB;IAEtC,OAAO,CAAC,gBAAgB,CAAkB;IAC1C,OAAO,CAAC,SAAS,CAAoB;IACrC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,SAAS,CAAC,CAAqB;gBAE3B,IAAI,EAAE,UAAU;IAS5B,OAAO;IAKP,MAAM,CAAC,MAAM,EAAE,UAAU;IAKzB,OAAO,CAAC,qBAAqB;IAoB7B,OAAO,CAAC,uBAAuB;CA4EhC"}

package/dist/types/src/hooks/awareness-provider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"awareness-provider.d.ts","sourceRoot":"","sources":["../../../../src/hooks/awareness-provider.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,EAAS,MAAM,aAAa,CAAC;AAIzD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAaxH,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,qBAAa,sBAAuB,YAAW,iBAAiB;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqC;IAEnE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAQ;IAC/B,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAS;IAClC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAgB;IAEtC,OAAO,CAAC,IAAI,CAAC,CAAU;IACvB,OAAO,CAAC,SAAS,CAAC,CAAe;IACjC,OAAO,CAAC,WAAW,CAAC,CAAiB;IAErC,SAAgB,iBAAiB,cAAqB;gBAE1C,MAAM,EAAE,uBAAuB;IAO3C,IAAI;IAqCJ,KAAK;IAML,eAAe,IAAI,cAAc,EAAE;IAInC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,GAAG,SAAS,GAAG,IAAI;IAWrD,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,kBAAkB;CAK3B"}

package/dist/types/src/hooks/defs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/hooks/defs.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAGF,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC"}

package/dist/types/src/hooks/extension-utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"extension-utils.d.ts","sourceRoot":"","sources":["../../../../src/hooks/extension-utils.ts"],"names":[],"mappings":"AAOA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAehE,OAAO,EAAqC,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEzG,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAMhD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAS7C;;;GAGG;AAEH,MAAM,MAAM,sBAAsB,GAAG;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAWF,eAAO,MAAM,qBAAqB,YAAa,sBAAsB,KAAG,SAuBvE,CAAC;AAMF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE;YACP,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;KACH,CAAC;CACH,CAAC;AAWF,eAAO,MAAM,qBAAqB,yCAAyC,sBAAsB,KAAQ,SASxG,CAAC;AAMF,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC5B,CAAC;AAIF,eAAO,MAAM,oBAAoB,kCAAmC,mBAAmB,KAAG,SAAS,EAsBlG,CAAC;AAGF,eAAO,MAAM,cAAc,kBACnB,UAAU;QACT,MAAM;SAAO,MAAM,GAAG,SAAS;;CASvC,CAAC"}