@dxos/react-ui-editor 0.3.10-main.dcfebef → 0.3.10-main.e38869c

package/src/hooks/automerge/automerge.stories.tsx

@@ -9,6 +9,7 @@ import { basicSetup } from 'codemirror';
 import get from 'lodash.get';
 import React, { useEffect, useRef, useState } from 'react';
 
+// TODO(burdon): Why separate imports?
 import { type Prop } from '@dxos/automerge/automerge';
 import { type DocHandle, Repo } from '@dxos/automerge/automerge-repo';
 

package/src/hooks/useTextModel.ts

@@ -26,12 +26,19 @@ import { SpaceAwarenessProvider } from './yjs';
 // TODO(burdon): Move.
 type Awareness = awarenessProtocol.Awareness;
 
+export type DocumentRange = {
+  id: string;
+  from: number;
+  to: number;
+};
+
 // 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;
+  ranges: DocumentRange[];
   extension?: Extension;
   awareness?: Awareness;
   peer?: {
@@ -80,6 +87,7 @@ const createYjsModel = ({ identity, space, text }: UseTextModelOptions): EditorM
     id: text.doc.guid,
     content: text.content,
     text: () => text.content!.toString(),
+    ranges: [],
     extension: yCollab(text.content as YText, provider?.awareness),
     awareness: provider?.awareness,
     peer: identity
@@ -99,6 +107,7 @@ const createAutomergeModel = ({ identity, text }: UseTextModelOptions): EditorMo
     id: obj.id,
     content: doc,
     text: () => get(doc.handle.docSync(), doc.path),
+    ranges: [],
     extension: automergePlugin(doc.handle, doc.path),
     peer: identity
       ? {

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

@@ -12,10 +12,11 @@ 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 {
+  title: 'react-ui-editor/YJS',
   component: MarkdownEditor,
   decorators: [withTheme],
 };
@@ -50,7 +51,6 @@ const Story = () => {
 };
 
 export const Default = {
-  title: 'react-ui-editor/YJS',
   // TODO(wittjosiah): Decorator for doing this without clients being initialized?
   render: () => <ClientRepeater count={2} Component={Story} />,
 };

package/src/styles/markdown.ts

@@ -6,14 +6,20 @@ import { mx } from '@dxos/react-ui-theme';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
+// TODO(burdon): Better way to align vertically than negative margin? Font-specific?
 // 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-[10px]'],
+  2: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-3xl', '-ml-[8px]'],
+  3: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-2xl', '-ml-[7px]'],
+  4: ['mbs-4 mbe-2 font-medium text-inherit no-underline text-xl', '-ml-[6px]'],
+  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 +43,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

@@ -169,6 +169,7 @@ export class Replicator {
       id: doc.guid,
       text: () => content.toString(),
       content,
+      ranges: [],
       awareness: provider.awareness,
       peer: { id },
     };

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"}