@dxos/react-ui-editor 0.3.10-main.16895f7 → 0.3.10-main.375af01

package/dist/types/src/styles/markdown.d.ts

@@ -1,17 +1,19 @@
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export declare const heading: Record<HeadingLevel, string>;
-export declare const blockquote = "mlb-2 border-is-4 border-neutral-500/50 pis-5";
-export declare const unorderedList = "mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[attr(marker)] [&>li:before]:mlb-1 [&>li:before]:mie-2";
-export declare const orderedList = "mlb-2 grid grid-cols-[min-content_1fr]  [&>li:before]:content-[counters(section,_\".\")_\"._\"] [counter-reset:section] [&>li:before]:mlb-1";
-export declare const listItem = "contents before:[counter-increment:section]";
-export declare const codeBlock = "mlb-2 font-mono bg-neutral-500/10 p-3 rounded";
-export declare const horizontalRule = "mlb-4 border-neutral-500/50";
+export declare const text = "text-neutral-800 dark:text-neutral-200";
+export declare const light = "text-neutral-200 dark:text-neutral-800";
+export declare const mark: string;
 export declare const paragraph = "mlb-1";
 export declare const bold = "font-bold";
-export declare const code = "font-mono bg-neutral-500/10 rounded pli-0.5 plb-0.5 -mlb-0.5";
-export declare const placeholder = "font-mono";
-export declare const codeWithoutMarks: string;
 export declare const italic = "italic";
 export declare const strikethrough = "line-through";
-export declare const mark = "!font-normal !no-underline !text-inherit opacity-40";
+export declare const code = "font-mono !no-underline text-neutral-700 dark:text-neutral-300";
+export declare const codeMark = "font-mono text-primary-500";
+export declare const codeBlock = "mlb-2 font-mono bg-neutral-500/10 p-3 rounded";
+export declare const inlineUrl: string;
+export declare const blockquote: string;
+export declare const horizontalRule = "flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-500/50";
+export declare const unorderedList = "mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[attr(marker)] [&>li:before]:mlb-1 [&>li:before]:mie-2";
+export declare const orderedList = "mlb-2 grid grid-cols-[min-content_1fr] [&>li:before]:content-[counters(section,_\".\")_\"._\"] [counter-reset:section] [&>li:before]:mlb-1";
+export declare const listItem = "contents before:[counter-increment:section]";
 //# sourceMappingURL=markdown.d.ts.map

package/dist/types/src/styles/markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/styles/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEjD,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAOhD,CAAC;AAEF,eAAO,MAAM,UAAU,kDAAkD,CAAC;AAG1E,eAAO,MAAM,aAAa,wHAC6F,CAAC;AACxH,eAAO,MAAM,WAAW,gJACmH,CAAC;AAE5I,eAAO,MAAM,QAAQ,gDAAgD,CAAC;AAEtE,eAAO,MAAM,SAAS,kDAAkD,CAAC;AAEzE,eAAO,MAAM,cAAc,gCAAgC,CAAC;AAE5D,eAAO,MAAM,SAAS,UAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,cAAc,CAAC;AAEhC,eAAO,MAAM,IAAI,iEAAiE,CAAC;AAEnF,eAAO,MAAM,WAAW,cAAc,CAAC;AAEvC,eAAO,MAAM,gBAAgB,QAA8B,CAAC;AAE5D,eAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,eAAO,MAAM,aAAa,iBAAiB,CAAC;AAE5C,eAAO,MAAM,IAAI,wDAAwD,CAAC"}
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../../src/styles/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAGjD,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAOhD,CAAC;AAEF,eAAO,MAAM,IAAI,2CAA2C,CAAC;AAC7D,eAAO,MAAM,KAAK,2CAA2C,CAAC;AAE9D,eAAO,MAAM,IAAI,QAAmE,CAAC;AAErF,eAAO,MAAM,SAAS,UAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,cAAc,CAAC;AAChC,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,eAAO,MAAM,aAAa,iBAAiB,CAAC;AAE5C,eAAO,MAAM,IAAI,mEAAmE,CAAC;AACrF,eAAO,MAAM,QAAQ,+BAA+B,CAAC;AACrD,eAAO,MAAM,SAAS,kDAAkD,CAAC;AAEzE,eAAO,MAAM,SAAS,QAAmB,CAAC;AAG1C,eAAO,MAAM,UAAU,QAAsF,CAAC;AAG9G,eAAO,MAAM,cAAc,qFAAqF,CAAC;AAGjH,eAAO,MAAM,aAAa,wHAC6F,CAAC;AACxH,eAAO,MAAM,WAAW,+IACkH,CAAC;AAE3I,eAAO,MAAM,QAAQ,gDAAgD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.3.10-main.16895f7",
+  "version": "0.3.10-main.375af01",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -28,42 +28,30 @@
     "@lezer/highlight": "^1.2.0",
     "@lezer/markdown": "^1.1.1",
     "@replit/codemirror-vim": "^6.0.14",
-    "@tiptap/core": "2.0.0-beta.220",
-    "@tiptap/extension-collaboration": "2.0.0-beta.220",
-    "@tiptap/extension-collaboration-cursor": "2.0.0-beta.220",
-    "@tiptap/extension-heading": "2.0.0-beta.220",
-    "@tiptap/extension-list-item": "2.0.0-beta.220",
-    "@tiptap/extension-placeholder": "2.0.0-beta.220",
-    "@tiptap/pm": "2.0.0-beta.220",
-    "@tiptap/react": "2.0.0-beta.220",
-    "@tiptap/starter-kit": "2.0.0-beta.220",
     "codemirror": "6.0.1",
     "lib0": "^0.2.65",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.get": "^4.4.2",
-    "prosemirror-model": "^1.19.0",
-    "prosemirror-state": "^1.4.2",
-    "prosemirror-view": "^1.30.1",
     "style-mod": "^4.1.0",
     "y-codemirror.next": "^0.3.2",
-    "y-prosemirror": "~1.0.20",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.10",
-    "@dxos/automerge": "0.3.10-main.16895f7",
-    "@dxos/echo-schema": "0.3.10-main.16895f7",
-    "@dxos/display-name": "0.3.10-main.16895f7",
-    "@dxos/debug": "0.3.10-main.16895f7",
-    "@dxos/invariant": "0.3.10-main.16895f7",
-    "@dxos/log": "0.3.10-main.16895f7",
-    "@dxos/protocols": "0.3.10-main.16895f7",
-    "@dxos/react-ui": "0.3.10-main.16895f7",
-    "@dxos/react-async": "0.3.10-main.16895f7",
-    "@dxos/react-ui-theme": "0.3.10-main.16895f7",
-    "@dxos/text-model": "0.3.10-main.16895f7",
-    "@dxos/util": "0.3.10-main.16895f7"
+    "@dxos/automerge": "0.3.10-main.375af01",
+    "@dxos/display-name": "0.3.10-main.375af01",
+    "@dxos/echo-schema": "0.3.10-main.375af01",
+    "@dxos/invariant": "0.3.10-main.375af01",
+    "@dxos/log": "0.3.10-main.375af01",
+    "@dxos/protocols": "0.3.10-main.375af01",
+    "@dxos/react-async": "0.3.10-main.375af01",
+    "@dxos/react-ui": "0.3.10-main.375af01",
+    "@dxos/react-ui-theme": "0.3.10-main.375af01",
+    "@dxos/util": "0.3.10-main.375af01",
+    "@dxos/text-model": "0.3.10-main.375af01",
+    "@dxos/debug": "0.3.10-main.375af01"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.0.19",
+    "@faker-js/faker": "^8.0.2",
     "@phosphor-icons/react": "^2.0.5",
     "@preact/signals-react": "^1.3.6",
     "@types/lodash.defaultsdeep": "^4.6.6",
@@ -72,17 +60,17 @@
     "@types/react-dom": "^18.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/echo-typegen": "0.3.10-main.16895f7",
-    "@dxos/config": "0.3.10-main.16895f7",
-    "@dxos/react-client": "0.3.10-main.16895f7",
-    "@dxos/storybook-utils": "0.3.10-main.16895f7",
-    "@dxos/react-ui": "0.3.10-main.16895f7"
+    "@dxos/react-client": "0.3.10-main.375af01",
+    "@dxos/react-ui": "0.3.10-main.375af01",
+    "@dxos/echo-typegen": "0.3.10-main.375af01",
+    "@dxos/storybook-utils": "0.3.10-main.375af01",
+    "@dxos/config": "0.3.10-main.375af01"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.3.10-main.16895f7"
+    "@dxos/react-client": "0.3.10-main.375af01"
   },
   "publishConfig": {
     "access": "public"

package/src/components/TextEditor/MarkdownEditor.stories.tsx

@@ -0,0 +1,242 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+import { EditorView } from '@codemirror/view';
+import { faker } from '@faker-js/faker';
+import { ArrowSquareOut } from '@phosphor-icons/react';
+import React, { StrictMode, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { TextObject } from '@dxos/echo-schema';
+import { fixedInsetFlexLayout, getSize, groupSurface, mx } from '@dxos/react-ui-theme';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { MarkdownEditor, type TextEditorProps, type TextEditorRef } from './TextEditor';
+import { autocomplete, listener, link, tasklist, tooltip, type TooltipOptions, type LinkOptions } from './extensions';
+import { useTextModel } from '../../hooks';
+
+// TODO(burdon): Read-only render mode (presentation).
+// TODO(burdon): Slides.
+// TODO(burdon): Autocomplete.
+// TODO(burdon): Block quote.
+// TODO(burdon): Images.
+// TODO(burdon): Tables.
+
+const str = (...lines: string[]) => lines.join('\n');
+
+// prettier-ignore
+const text = {
+  tasks: str(
+    '## Tasks',
+    '',
+    '- [x] parsing',
+    '- [ ] styling',
+    '- [ ] rendering',
+  ),
+
+  list: str(
+    '## List',
+    '',
+    '- new york',
+    '- london',
+    '- tokyo',
+  ),
+
+  numbered: str(
+    '## Numbered',
+    '',
+    '1. one',
+    '2. two',
+    '3. three',
+    ''
+  ),
+
+  code: str(
+    '## Code',
+    '',
+    '```',
+    'const x = 100;',
+    '```',
+    '',
+    '```tsx',
+    'const Component = () => {',
+    '  const x = 100;',
+    '  return () => <div>Test</div>;',
+    '};',
+    '```'
+  ),
+
+  links: str(
+    '## Links',
+    '',
+    'This is a naked link https://dxos.org within a sentence.',
+    '',
+    'Take a look at [DXOS](https://dxos.org) and how to [get started](https://docs.dxos.org/guide/getting-started.html).',
+    '',
+  ),
+
+  headings: str(
+    ...[1, 2, 3, 4, 5, 6].map((level) => ['#'.repeat(level) + ` Heading ${level}`, faker.lorem.sentences(), '']).flat(),
+  ),
+};
+
+const document = str(
+  '# Markdown',
+  '',
+  '> This is a block quote.',
+  '',
+  'This is all about https://dxos.org and related technologies.',
+  '',
+  'This this is **bold**, __underlined__, _italic_, and `f(INLINE)`.',
+  '',
+  '__NOTE__: Fenced code uses the base font.',
+  '',
+  '---',
+  text.links,
+  '---',
+  text.list,
+  '---',
+  text.tasks,
+  '---',
+  text.numbered,
+  '---',
+  text.code,
+  '---',
+  text.headings,
+);
+
+const links = [
+  { label: 'DXOS', apply: '[DXOS](https://dxos.org)' },
+  { label: 'GitHub', apply: '[DXOS GitHub](https://github.com/dxos)' },
+  { label: 'Automerge', apply: '[Automerge](https://automerge.org/)' },
+  { label: 'IPFS', apply: '[Protocol Labs](https://docs.ipfs.tech)' },
+  { label: 'StackEdit', apply: '[StackEdit](https://stackedit.io/app)' },
+];
+
+const hover =
+  'rounded-sm text-base text-primary-600 hover:text-primary-500 dark:text-primary-300 hover:dark:text-primary-200';
+
+const onHover: TooltipOptions['onHover'] = (el, url) => {
+  const web = new URL(url);
+  createRoot(el).render(
+    <StrictMode>
+      <a href={url} target='_blank' rel='noreferrer' className={hover}>
+        {web.origin}
+        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1')} />
+      </a>
+    </StrictMode>,
+  );
+};
+
+const onRender: LinkOptions['onRender'] = (el, url) => {
+  createRoot(el).render(
+    <StrictMode>
+      <a href={url} target='_blank' rel='noreferrer' className={hover}>
+        <ArrowSquareOut weight='bold' className={mx(getSize(4), 'inline-block leading-none mis-1 mb-1')} />
+      </a>
+    </StrictMode>,
+  );
+};
+
+const Story = ({
+  text,
+  automerge,
+  ...props
+}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
+  const ref = useRef<TextEditorRef>(null);
+  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: automerge }) });
+  const model = useTextModel({ text: item.text });
+  if (!model) {
+    return null;
+  }
+
+  return (
+    <div className={mx(fixedInsetFlexLayout, groupSurface)}>
+      <div className='flex justify-center overflow-y-scroll'>
+        <div className='flex flex-col w-[800px] py-16'>
+          <MarkdownEditor ref={ref} model={model} {...props} />
+          <div className='flex shrink-0 h-[300px]'></div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'react-ui-editor/MarkdownEditor',
+  component: MarkdownEditor,
+  decorators: [withTheme],
+  render: Story,
+};
+
+export const Default = {
+  render: () => (
+    <Story
+      text={document}
+      extensions={[
+        link({ onRender }),
+        tooltip({ onHover }),
+        tasklist(),
+        autocomplete({
+          getOptions: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+        }),
+      ]}
+    />
+  ),
+};
+
+export const Simple = {
+  render: () => <Story text={document} />,
+};
+
+export const Tooltips = {
+  render: () => <Story text={text.links} extensions={[tooltip({ onHover })]} />,
+};
+
+export const Links = {
+  render: () => <Story text={text.links} extensions={[link({ onRender })]} />,
+};
+
+export const TaskList = {
+  render: () => (
+    <Story
+      text={str(text.tasks, '', text.list)}
+      extensions={[
+        tasklist(),
+        listener((text) => {
+          console.log(text);
+        }),
+      ]}
+    />
+  ),
+};
+
+export const Autocomplete = {
+  render: () => (
+    <Story
+      text={str('# Autocomplete', '', '', '', '', '', '')}
+      extensions={[
+        link({ onRender }),
+        autocomplete({
+          getOptions: (text) => links.filter(({ label }) => label.toLowerCase().includes(text.toLowerCase())),
+        }),
+      ]}
+    />
+  ),
+};
+
+export const Diagnostics = {
+  render: () => (
+    <Story
+      text={document}
+      extensions={[
+        // Cursor moved.
+        EditorView.updateListener.of((update) => {
+          console.log('update', update.view.state.selection.main.head);
+        }),
+      ]}
+    />
+  ),
+};

package/src/components/TextEditor/TextEditor.stories.tsx

@@ -3,63 +3,46 @@
 //
 
 import '@dxosTheme';
-import { markdown } from '@codemirror/lang-markdown';
-import { ArrowCircleUp } from '@phosphor-icons/react';
-import React, { StrictMode, useState } from 'react';
-import { createRoot } from 'react-dom/client';
+
+import defaultsDeep from 'lodash.defaultsdeep';
+import React, { useRef, useState } from 'react';
 
 import { TextObject } from '@dxos/echo-schema';
-import { fixedInsetFlexLayout, getSize, groupSurface, inputSurface, mx } from '@dxos/react-ui-theme';
+import { fixedInsetFlexLayout, groupSurface, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { TextEditor } from './TextEditor';
-import { createHyperlinkTooltip, hyperlinkDecoration } from './extensions';
+import { defaultSlots, TextEditor, type TextEditorProps, type TextEditorRef, type TextEditorSlots } from './TextEditor';
+import { textTheme } from './themes';
 import { useTextModel } from '../../hooks';
 
-const text = [
-  '',
-  '',
-  'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
+const initialText = [
+  '# TextEditor',
   '',
+  'This is the basic plain text editor within minimal formatting.',
+  'You can add custom styles and create custom extensions.',
+  'Or use the MarkdownEditor to edit documents.',
   '',
+  'https://dxos.org',
 ].join('\n');
 
-const hyperLinkTooltip = () =>
-  createHyperlinkTooltip((el, url) => {
-    const web = new URL(url);
-    createRoot(el).render(
-      <StrictMode>
-        <div className='flex gap-1 items-center'>
-          <ArrowCircleUp className={mx(getSize(6), 'text-blue-500')} />
-          <p className='pr-1'>{web.origin}</p>
-        </div>
-      </StrictMode>,
-    );
-  });
-
-const Story = ({ automerge }: { automerge?: boolean }) => {
-  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: !!automerge }) });
+const Story = ({
+  text,
+  automerge,
+  ...props
+}: { text?: string; automerge?: boolean } & Pick<TextEditorProps, 'extensions' | 'slots'>) => {
+  const ref = useRef<TextEditorRef>(null);
+  const [item] = useState({ text: new TextObject(text, undefined, undefined, { useAutomergeBackend: automerge }) });
   const model = useTextModel({ text: item.text });
   if (!model) {
-    return <></>;
+    return null;
   }
 
   return (
     <div className={mx(fixedInsetFlexLayout, groupSurface)}>
-      <div className='flex justify-center p-8'>
-        <div className='w-[800px]'>
-          <TextEditor
-            model={model}
-            extensions={[
-              markdown(),
-              hyperlinkDecoration({ link: false }),
-              hyperLinkTooltip(),
-              // EditorView.domEventHandlers({
-              //   mousedown: (e, view) => {},
-              // }),
-            ]}
-            slots={{ root: { className: mx(inputSurface, 'p-2') } }}
-          />
+      <div className='flex justify-center overflow-y-scroll'>
+        <div className='flex flex-col w-[800px] py-16'>
+          <TextEditor ref={ref} model={model} {...props} />
+          <div className='flex shrink-0 h-[300px]'></div>
         </div>
       </div>
     </div>
@@ -67,13 +50,33 @@ const Story = ({ automerge }: { automerge?: boolean }) => {
 };
 
 export default {
+  title: 'react-ui-editor/TextEditor',
   component: TextEditor,
   decorators: [withTheme],
   render: Story,
 };
 
-export const Default = {};
+export const Default = {
+  render: () => (
+    <Story
+      text={initialText}
+      slots={defaultsDeep(
+        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
+        defaultSlots,
+      )}
+    />
+  ),
+};
 
 export const Automerge = {
-  render: () => <Story automerge />,
+  render: () => (
+    <Story
+      text={initialText}
+      slots={defaultsDeep(
+        { editor: { theme: textTheme, placeholder: 'Enter text...' } } satisfies TextEditorSlots,
+        defaultSlots,
+      )}
+      automerge
+    />
+  ),
 };