@dxos/react-ui-editor 0.3.10-main.cb1d9e2 → 0.3.10-main.cbe7692

package/src/hooks/automerge/{amToCodemirror.ts → translation/automerge-to-codemirror.ts}

@@ -2,6 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
+// TODO(burdon): Additional copyright?
+
 import { ChangeSet, type ChangeSpec, type EditorSelection, type EditorState } from '@codemirror/state';
 import { type EditorView } from '@codemirror/view';
 
@@ -14,9 +16,14 @@ import {
   type SpliceTextPatch,
 } from '@dxos/automerge/automerge';
 
-import { reconcileAnnotationType } from './plugin';
+import { reconcileAnnotationType } from '../plugin';
 
-export default (view: EditorView, selection: EditorSelection, target: Prop[], patches: Patch[]) => {
+export const automergeToCodemirror = (
+  view: EditorView,
+  selection: EditorSelection,
+  target: Prop[],
+  patches: Patch[],
+) => {
   for (const patch of patches) {
     const changeSpec = handlePatch(patch, target, view.state);
     if (changeSpec != null) {
@@ -28,6 +35,7 @@ export default (view: EditorView, selection: EditorSelection, target: Prop[], pa
       });
     }
   }
+
   view.dispatch({
     selection,
     annotations: reconcileAnnotationType.of({}),

package/src/hooks/automerge/{codeMirrorToAm.ts → translation/codemirror-to-automerge.ts}

@@ -2,14 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
+// TODO(burdon): Additional copyright?
+
 import { type EditorState, type Text, type Transaction } from '@codemirror/state';
 
 import { next as am, type Heads } from '@dxos/automerge/automerge';
 
-import { type IDocHandle } from './handle';
-import { type Field } from './plugin';
+import { type IDocHandle } from '../handle';
+import { type Field } from '../plugin';
 
-export default (
+export const codemirrorToAutomerge = (
   field: Field,
   handle: IDocHandle,
   transactions: Transaction[],
@@ -18,7 +20,7 @@ export default (
   const { lastHeads, path } = state.field(field);
 
   // We don't want to call `automerge.updateAt` if there are no changes.
-  // Otherwise later on `automerge.diff` will return empty patches that result in a no-op but still mess up the selection.
+  // Otherwise, later on `automerge.diff` will return empty patches that result in a no-op but still mess up the selection.
   let hasChanges = false;
   for (const tr of transactions) {
     tr.changes.iterChanges(() => {
@@ -37,5 +39,6 @@ export default (
       });
     }
   });
+
   return newHeads ?? undefined;
 };

package/src/hooks/automerge/translation/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './automerge-to-codemirror';
+export * from './codemirror-to-automerge';

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/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/automerge/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/hooks/automerge/amToCodemirror.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"amToCodemirror.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/automerge/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/hooks/automerge/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/hooks/automerge/codeMirrorToAm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"codeMirrorToAm.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/automerge/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"}