@dxos/react-ui-editor 0.3.10-main.5515dfe → 0.3.10-main.560f82b

package/src/hooks/useTextModel.ts

@@ -2,9 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useMemo } from 'react';
+import { type Extension } from '@codemirror/state';
+import get from 'lodash.get';
+import { useEffect, useState } from 'react';
+import { yCollab } from 'y-codemirror.next';
 import type * as awarenessProtocol from 'y-protocols/awareness';
 
+import { invariant } from '@dxos/invariant';
 import {
   type DocAccessor,
   type Space,
@@ -16,18 +20,20 @@ import {
 import { type Identity } from '@dxos/react-client/halo';
 import type { YText, YXmlFragment } from '@dxos/text-model';
 
+import { automergePlugin } from './automerge';
 import { SpaceAwarenessProvider } from './yjs';
 
 // TODO(burdon): Move.
 type Awareness = awarenessProtocol.Awareness;
-type Provider = { awareness: Awareness };
 
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export type EditorModel = {
   id: string;
+  // TODO(burdon): Remove.
   content: string | YText | YXmlFragment | DocAccessor;
   text: () => string;
-  provider?: Provider;
+  extension?: Extension;
+  awareness?: Awareness;
   peer?: {
     id: string;
     name?: string;
@@ -41,57 +47,59 @@ export type UseTextModelOptions = {
   text?: TextObject;
 };
 
-// TODO(burdon): Don't support returning undefined (and remove checks from calling code).
-// TODO(burdon): Decouple space (make Editor less dependent on entire stack)?
+// TODO(burdon): Remove YJS/Automerge deps (from UI component -- create abstraction; incl. all ECHO/Space deps).
 // TODO(wittjosiah): Factor out to common package? @dxos/react-client?
 export const useTextModel = ({ identity, space, text }: UseTextModelOptions): EditorModel | undefined => {
-  // TODO(burdon): Remove?
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const provider = useMemo(() => {
-    if (isActualAutomergeObject(text)) {
-      return undefined;
-    }
+  const [model, setModel] = useState<EditorModel | undefined>(() => createModel({ identity, space, text }));
+  useEffect(() => {
+    setModel(createModel({ identity, space, text }));
+  }, [identity, space, text]);
+  return model;
+};
 
-    if (!space || !text?.doc) {
+const createModel = (options: UseTextModelOptions) => {
+  const { text } = options;
+  if (isActualAutomergeObject(text)) {
+    return createAutomergeModel(options);
+  } else {
+    if (!text?.doc) {
       return undefined;
     }
 
-    return new SpaceAwarenessProvider({ space, doc: text.doc, channel: `yjs.awareness.${text.id}` });
-  }, [identity, space, text, text?.doc]);
-
-  const content = useMemo(() => {
-    if (isActualAutomergeObject(text)) {
-      const obj = text as any as AutomergeTextCompat;
-      return getRawDoc(obj, [obj.field]);
-    } else {
-      return text?.content;
-    }
-  }, [text]);
-
-  if (!text?.doc || !text?.content) {
-    return undefined;
+    return createYjsModel(options);
   }
+};
 
-  if (isActualAutomergeObject(text)) {
-    const obj = text as any as AutomergeTextCompat;
-    return {
-      id: obj.id,
-      content: content!,
-      text: () => content!.toString(),
-      provider: undefined,
-      peer: identity
-        ? {
-            id: identity.identityKey.toHex(),
-            name: identity.profile?.displayName,
-          }
-        : undefined,
-    };
-  }
+const createYjsModel = ({ identity, space, text }: UseTextModelOptions): EditorModel => {
+  invariant(text?.doc && text?.content);
+  const provider = space
+    ? new SpaceAwarenessProvider({ space, doc: text.doc, channel: `yjs.awareness.${text.id}` })
+    : undefined;
 
   return {
     id: text.doc.guid,
     content: text.content,
     text: () => text.content!.toString(),
+    extension: yCollab(text.content as YText, provider?.awareness),
+    awareness: provider?.awareness,
+    peer: identity
+      ? {
+          id: identity.identityKey.toHex(),
+          name: identity.profile?.displayName,
+        }
+      : undefined,
+  };
+};
+
+const createAutomergeModel = ({ identity, text }: UseTextModelOptions): EditorModel => {
+  const obj = text as any as AutomergeTextCompat;
+  const doc = getRawDoc(obj, [obj.field]);
+
+  return {
+    id: obj.id,
+    content: doc,
+    text: () => get(doc.handle.docSync(), doc.path),
+    extension: automergePlugin(doc.handle, doc.path),
     peer: identity
       ? {
           id: identity.identityKey.toHex(),

package/src/{components/TextEditor → hooks/yjs}/yjs.stories.tsx

@@ -12,7 +12,7 @@ import { ClientRepeater, textGenerator, useDataGenerator } from '@dxos/react-cli
 import { useId, Input } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { MarkdownEditor } from './TextEditor';
+import { MarkdownEditor } from '../../components';
 import { Replicator, useYjsModel } from '../../testing';
 
 export default {

package/src/styles/markdown.ts

@@ -7,13 +7,18 @@ import { mx } from '@dxos/react-ui-theme';
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 // https://tailwindcss.com/docs/font-weight
-export const heading: Record<HeadingLevel, string> = {
-  1: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl',
-  2: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl',
-  3: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl',
-  4: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-xl',
-  5: 'mbs-4 mbe-2 font-medium text-inherit no-underline text-lg',
-  6: 'mbs-4 mbe-2 font-medium text-inherit no-underline',
+export const headings: Record<HeadingLevel, string[]> = {
+  1: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-4xl', '-ml-1.5'],
+  2: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl', '-ml-1.5'],
+  3: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl', '-ml-1.5'],
+  4: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-xl', '-ml-[5px]'],
+  5: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-lg', '-ml-[5px]'],
+  6: ['mbs-4 mbe-2 font-medium text-inherit no-underline', '-ml-[4px]'],
+};
+
+export const heading = (level: HeadingLevel, readonly?: boolean) => {
+  const [style, offset] = headings[level];
+  return mx(style, readonly && offset);
 };
 
 export const text = 'text-neutral-800 dark:text-neutral-200';
@@ -37,7 +42,8 @@ export const inlineUrl = mx(code, 'px-1');
 export const blockquote = mx('pl-1 mr-1 border-is-4 border-primary-500/70 dark:border-primary-500/30', light);
 
 // TODO(burdon): Replace with widget.
-export const horizontalRule = 'flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-500/50';
+export const horizontalRule =
+  'flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-200 dark:border-neutral-800';
 
 // TODO(thure): Tailwind was not seeing `[&>li:before]:content-["•"]` as a utility class, but it would work if instead of `"•"` it was `"X"`… why?
 export const unorderedList =

package/src/testing/replicator.ts

@@ -163,17 +163,17 @@ export class Replicator {
       colorLight: cursorColor.light,
     });
 
-    // TODO(burdon): Create concrete class that implements SyncModel?
+    const field = 'content';
+    const content = this._kind === TextKind.PLAIN ? doc.getText(field) : doc.getXmlFragment(field);
     const model: EditorModel = {
       id: doc.guid,
-      content: this._kind === TextKind.PLAIN ? doc.getText('content') : doc.getXmlFragment('content'),
-      text: () => model.content.toString(), // TODO(burdon): Fix.
-      provider,
+      text: () => content.toString(),
+      content,
+      awareness: provider.awareness,
       peer: { id },
     };
 
     this._peers.push(model);
-
     return model;
   };
 }
@@ -185,6 +185,5 @@ export type UseYjsModelOptions = {
 };
 
 export const useYjsModel = ({ replicator, id, doc }: UseYjsModelOptions): EditorModel => {
-  const peer = useMemo(() => replicator.createPeer(id, doc), [doc]);
-  return peer;
+  return useMemo(() => replicator.createPeer(id, doc), [doc]);
 };

package/dist/types/src/automerge/automerge-plugin/PatchSemaphore.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PatchSemaphore.d.ts","sourceRoot":"","sources":["../../../../../src/automerge/automerge-plugin/PatchSemaphore.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAI9D,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,KAAK,KAAK,EAA8E,MAAM,UAAU,CAAC;AAElH,KAAK,GAAG,CAAC,CAAC,IAAI,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC/B,KAAK,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;AAE7B,KAAK,QAAQ,GAAG,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,OAAO,CAAC,KAAK,IAAI,KAAK,KAAK,GAAG,SAAS,CAAC;AAE3F,qBAAa,cAAc;IACzB,MAAM,EAAG,KAAK,CAAC;IACf,YAAY,UAAS;IACrB,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAM;gBAEjB,KAAK,CAAC,EAAE,KAAK;IAMzB,SAAS,WAAY,UAAU,QAAQ,UAAU,UA2C/C;CACH"}

package/dist/types/src/automerge/automerge-plugin/amToCodemirror.d.ts

@@ -1,6 +0,0 @@
-import { type EditorSelection } from '@codemirror/state';
-import { type EditorView } from '@codemirror/view';
-import { type Patch, type Prop } from '@dxos/automerge/automerge';
-declare const _default: (view: EditorView, selection: EditorSelection, target: Prop[], patches: Patch[]) => void;
-export default _default;
-//# sourceMappingURL=amToCodemirror.d.ts.map

package/dist/types/src/automerge/automerge-plugin/amToCodemirror.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"amToCodemirror.d.ts","sourceRoot":"","sources":["../../../../../src/automerge/automerge-plugin/amToCodemirror.ts"],"names":[],"mappings":"AAIA,OAAO,EAA8B,KAAK,eAAe,EAAoB,MAAM,mBAAmB,CAAC;AACvG,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAGL,KAAK,KAAK,EACV,KAAK,IAAI,EAGV,MAAM,2BAA2B,CAAC;+BAIb,UAAU,aAAa,eAAe,UAAU,IAAI,EAAE,WAAW,KAAK,EAAE;AAA9F,wBAgBE"}

package/dist/types/src/automerge/automerge-plugin/codeMirrorToAm.d.ts

@@ -1,7 +0,0 @@
-import { type EditorState, type Transaction } from '@codemirror/state';
-import { type Heads } from '@dxos/automerge/automerge';
-import { type IDocHandle } from './handle';
-import { type Field } from './plugin';
-declare const _default: (field: Field, handle: IDocHandle, transactions: Transaction[], state: EditorState) => Heads | undefined;
-export default _default;
-//# sourceMappingURL=codeMirrorToAm.d.ts.map

package/dist/types/src/automerge/automerge-plugin/codeMirrorToAm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"codeMirrorToAm.d.ts","sourceRoot":"","sources":["../../../../../src/automerge/automerge-plugin/codeMirrorToAm.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,WAAW,EAAa,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAElF,OAAO,EAAc,KAAK,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;+CAI5B,UAAU,gBACJ,WAAW,EAAE,SACpB,WAAW,KACjB,KAAK,GAAG,SAAS;AALpB,wBA6BE"}

package/dist/types/src/automerge/automerge-plugin/handle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"handle.d.ts","sourceRoot":"","sources":["../../../../../src/automerge/automerge-plugin/handle.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,CAAC,MAAM,2BAA2B,CAAC;AAEpD,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,OAAO,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAChC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACpE,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,CAAC;IAEtG,WAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC;IACzD,cAAc,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC;CAC7D,CAAC"}

package/dist/types/src/automerge/automerge-plugin/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/automerge/automerge-plugin/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/dist/types/src/automerge/automerge-plugin/plugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../../../src/automerge/automerge-plugin/plugin.ts"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,SAAS,EAEd,WAAW,EACX,UAAU,EACV,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,SAAS,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAGlE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,EAAE,KAAK,CAAC;IACjB,IAAI,EAAE,IAAI,EAAE,CAAC;IACb,wBAAwB,EAAE,WAAW,EAAE,CAAC;CACzC,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,KAAK,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,UAAU,0DAAsC,CAAC;AAE9D,eAAO,MAAM,WAAW,sCAAsB,YAAY,WAAW,CAAgC,CAAC;AAEtG,eAAO,MAAM,YAAY,UAAW,WAAW,uCAAsD,CAAC;AAEtG,eAAO,MAAM,OAAO,UAAW,WAAW,mBAAiB,IAAI,EAA6B,CAAC;AAE7F,MAAM,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;AAMtC,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,UAAU,QAAQ,IAAI,EAAE,KAAG,eA8DlE,CAAC;AAEF,eAAO,MAAM,uBAAuB,qDAA+B,CAAC;AAEpE,eAAO,MAAM,aAAa,OAAQ,WAAW,KAAG,OAAmD,CAAC;AAEpG,eAAO,MAAM,aAAa,OAAQ,eAAe,SAchD,CAAC"}

package/dist/types/src/automerge/automerge.stories.d.ts

@@ -1,9 +0,0 @@
-import '@preact/signals-react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AutomergeRepo: {
-    render: () => JSX.Element;
-};
-//# sourceMappingURL=automerge.stories.d.ts.map

package/dist/types/src/automerge/automerge.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"automerge.stories.d.ts","sourceRoot":"","sources":["../../../../src/automerge/automerge.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,uBAAuB,CAAC;;;;AA8E/B,wBAEE;AAEF,eAAO,MAAM,aAAa;;CAEzB,CAAC"}

package/dist/types/src/components/TextEditor/yjs.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"yjs.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextEditor/yjs.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;AAWxC,wBAGE;AA+BF,eAAO,MAAM,OAAO;;;CAInB,CAAC"}

package/dist/types/src/hooks/useCollaboration.d.ts

@@ -1,9 +0,0 @@
-import type { Extension } from '@codemirror/state';
-import type { ThemeMode } from '@dxos/react-ui';
-import type { EditorModel } from './useTextModel';
-/**
- * Replication and awareness (incl. remote selection).
- * https://codemirror.net/docs/ref/#collab
- */
-export declare const useCollaboration: (model: EditorModel, themeMode: ThemeMode) => Extension | undefined;
-//# sourceMappingURL=useCollaboration.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useCollaboration.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useCollaboration.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAMnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAIhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,UAAW,WAAW,aAAa,SAAS,KAAG,SAAS,GAAG,SAuBvF,CAAC"}

package/src/hooks/useCollaboration.ts

@@ -1,45 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import type { Extension } from '@codemirror/state';
-import { useEffect, useState } from 'react';
-import { yCollab } from 'y-codemirror.next';
-
-import { generateName } from '@dxos/display-name';
-import { isDocAccessor } from '@dxos/echo-schema';
-import type { ThemeMode } from '@dxos/react-ui';
-import { getColorForValue } from '@dxos/react-ui-theme';
-import { YText } from '@dxos/text-model';
-
-import type { EditorModel } from './useTextModel';
-import { automergePlugin } from '../automerge/automerge-plugin';
-
-/**
- * Replication and awareness (incl. remote selection).
- * https://codemirror.net/docs/ref/#collab
- */
-export const useCollaboration = (model: EditorModel, themeMode: ThemeMode): Extension | undefined => {
-  const { content, provider, peer } = model;
-  const [extension] = useState(() => {
-    if (content instanceof YText) {
-      return yCollab(content, provider?.awareness);
-    } else if (isDocAccessor(content)) {
-      return automergePlugin(content.handle, content.path);
-    } else {
-      return undefined;
-    }
-  });
-
-  useEffect(() => {
-    if (provider && peer) {
-      provider.awareness.setLocalStateField('user', {
-        name: peer.name ?? generateName(peer.id),
-        color: getColorForValue({ value: peer.id, type: 'color' }),
-        colorLight: getColorForValue({ value: peer.id, themeMode, type: 'highlight' }),
-      });
-    }
-  }, [provider, peer, themeMode]);
-
-  return extension;
-};

package/src/{automerge/automerge-plugin → hooks/automerge}/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export { automergePlugin, type AutomergePlugin } from './plugin';
 export { type IDocHandle } from './handle';
+export { automergePlugin, type AutomergePlugin } from './plugin';