@dxos/react-ui-editor 0.3.9-main.501fe30 → 0.3.9-main.52d137d

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

@@ -3,7 +3,9 @@
 //
 
 import '@dxosTheme';
-import { markdown } from '@codemirror/lang-markdown';
+
+import { HighlightStyle, StreamLanguage } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
 import { ArrowCircleUp } from '@phosphor-icons/react';
 import React, { StrictMode, useState } from 'react';
 import { createRoot } from 'react-dom/client';
@@ -13,52 +15,75 @@ import { fixedInsetFlexLayout, getSize, groupSurface, inputSurface, mx } from '@
 import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor } from './TextEditor';
-import { createHyperlinkTooltip, hyperlinkDecoration } from './extensions';
+import { createHyperlinkTooltip, hyperlink } from './extensions';
 import { useTextModel } from '../../model';
 
-const text = [
-  '',
-  '',
-  'This is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).',
-  '',
-  '',
-].join('\n');
+export const nameRegex = /\{([\w_]+)}/;
 
-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>,
-    );
-  });
+/**
+ * Simple Monaco language extension.
+ * https://github.com/codemirror/stream-parser/blob/main/test/test-stream-parser.ts
+ */
+export const promptLanguage = StreamLanguage.define<{ count: number }>({
+  startState: () => ({ count: 0 }),
+
+  token: (stream, state) => {
+    state.count++;
+    if (stream.eatSpace()) {
+      return null;
+    }
+    if (stream.match(/^(<\w+>)/)) {
+      return 'tagName';
+    }
+    stream.next();
+    return null;
+  },
+});
+
+/**
+ * https://codemirror.net/examples/styling
+ * https://lezer.codemirror.net/docs/ref/#highlight
+ */
+export const promptHighlightStyles = HighlightStyle.define([
+  {
+    tag: tags.tagName,
+    class: mx(
+      'mr-1 p-1',
+      'bg-neutral-100 dark:bg-neutral-900 text-black dark:text-white font-mono text-sm',
+      'rounded border border-neutral-300 dark:border-neutral-700',
+    ),
+  },
+]);
+
+export const defaultHyperLinkTooltip = 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 = () => {
-  const [item] = useState({ text: new TextObject(text) });
+  const [item] = useState({
+    text: new TextObject(
+      '\n\n\nThis is all about [DXOS](https://dxos.org); read more [here](https://docs.dxos.org/guide/getting-started.html).\n\n\n',
+    ),
+  });
+
   const model = useTextModel({ text: item.text });
 
   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>
-      </div>
+    <div className={mx(fixedInsetFlexLayout, groupSurface, 'p-4 gap-4')}>
+      <TextEditor
+        model={model}
+        slots={{ root: { className: mx(inputSurface, 'p-2') } }}
+        extensions={[hyperlink, defaultHyperLinkTooltip]}
+      />
+      <pre>{JSON.stringify(model?.content?.toString(), null, 2)}</pre>
     </div>
   );
 };

package/src/components/TextEditor/TextEditor.tsx

@@ -96,7 +96,6 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
             : [syntaxHighlighting(defaultHighlightStyle)]),
 
           // Replication.
-          // TODO(burdon): Move to default extensions.
           ...(content instanceof YText ? [yCollab(content, undefined)] : []),
 
           // Custom.

package/src/components/TextEditor/extensions/{hyperlinkWidget.tsx → hyperlink.tsx}

@@ -15,20 +15,14 @@ import {
 
 // Notes: Can't edit widget content (or cursor nav through them).
 // - https://discuss.codemirror.net/t/focusing-inputs-within-widgets/5178/7
-//   Widgets intentionally always get set to contenteditable=false,
-//   or they would become part of CodeMirror’s editable content element.
+//   Widgets intentionally always get set to contenteditable=false, or they would become part of CodeMirror’s editable content element.
 //   You should be able to introduce new contenteditable=true child elements inside of them.
 
 const markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
 
-/**
- * Custom link decorator.
- * NOTE: The default markdown extension formats links by default.
- * @deprecated
- */
 const linkDecorator = () =>
   new MatchDecorator({
-    regexp: markdownLinkRegexp,
+    regexp: markdownLinkRegexp, // regexp || defaultRegexp,
     decorate: (add, from, to, match, view) => {
       const [_, label, url] = match;
       const p0 = {
@@ -51,21 +45,16 @@ const linkDecorator = () =>
         end: p1.end + 1 + url.length + 2,
       };
 
-      add(
-        p0.start,
-        p0.end,
-        Decoration.mark({ class: 'cm-hyperlink-bracket', _attributes: { style: 'display: none' } }),
-      );
+      // TODO(burdon): Wrap with tagName?
+      add(p0.start, p0.end, Decoration.mark({ class: 'cm-hyperlink-bracket' }));
       add(p1.start, p1.end, Decoration.mark({ class: 'cm-hyperlink-label' }));
-      add(
-        p2.start,
-        p2.end,
-        Decoration.mark({ class: 'cm-hyperlink-bracket', _attributes: { style: 'display: none' } }),
-      );
-      add(p3.start, p3.end, Decoration.mark({ class: 'cm-hyperlink-url', _attributes: { style: 'display: none' } }));
+      add(p2.start, p2.end, Decoration.mark({ class: 'cm-hyperlink-bracket' }));
+      add(p3.start, p3.end, Decoration.mark({ class: 'cm-hyperlink-url', __attributes: { style: 'display: none' } }));
     },
   });
 
+// const anchor = (dom: HTMLAnchorElement) => dom;
+
 export function hyperLinkExtension() {
   return ViewPlugin.fromClass(
     class HyperLinkView {
@@ -102,7 +91,7 @@ export function hyperLinkExtension() {
   );
 }
 
-export const hyperlinkStyle = EditorView.baseTheme({
+export const hyperLinkStyle = EditorView.baseTheme({
   '.cm-hyperlink-label': {
     cursor: 'pointer',
     textDecoration: 'underline',
@@ -116,4 +105,4 @@ export const hyperlinkStyle = EditorView.baseTheme({
   },
 });
 
-export const hyperlinkWidget: Extension = [hyperLinkExtension(), hyperlinkStyle];
+export const hyperlink: Extension = [hyperLinkExtension(), hyperLinkStyle];

package/src/components/TextEditor/extensions/hyperlinkTooltip.tsx

@@ -15,7 +15,6 @@ export type OnHyperlinkHover = (el: Element, url: string) => void;
  * https://codemirror.net/docs/ref/#view.hoverTooltip
  * https://github.com/codemirror/view/blob/main/src/tooltip.ts
  */
-// TODO(burdon): Create config object.
 export const createHyperlinkTooltip = (onHover: OnHyperlinkHover, regexp = markdownLinkRegexp) =>
   hoverTooltip((view, pos) => {
     const { from, text } = view.state.doc.lineAt(pos);

package/src/components/TextEditor/extensions/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './hyperlinkDecoration';
+export * from './hyperlink';
 export * from './hyperlinkTooltip';
-export * from './hyperlinkWidget';

package/src/components/TextEditor/theme.ts

@@ -10,7 +10,6 @@ import { tailwindConfig, type TailwindConfig } from '@dxos/react-ui-theme';
 const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
 
 /**
- * Minimal styles.
  * https://codemirror.net/examples/styling
  */
 // TODO(burdon): If given a "theme" suffix, `__docgen` properties are added to the object.
@@ -20,7 +19,10 @@ export const defaultStyles: {
   '&.cm-focused': {
     outline: 'none',
   },
-  '.cm-scroller': {
+  '.cm-placeholder': {
+    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+  },
+  '& .cm-scroller': {
     fontFamily: get(tokens, 'fontFamily.body', []).join(','),
     overflow: 'visible',
   },
@@ -28,8 +30,4 @@ export const defaultStyles: {
     backgroundColor: 'transparent',
     border: 'none',
   },
-  '.cm-link': {
-    color: get(tokens, 'extend.colors.primary.500'),
-    textDecoration: 'underline',
-  },
 };

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

@@ -1,9 +0,0 @@
-import type * as A from '@dxos/automerge/automerge';
-export type IDocHandle<T = any> = {
-    docSync(): A.Doc<T> | undefined;
-    change(callback: A.ChangeFn<T>, options?: A.ChangeOptions<T>): void;
-    changeAt(heads: A.Heads, callback: A.ChangeFn<T>, options?: A.ChangeOptions<T>): string[] | undefined;
-    addListener(event: 'change', listener: () => void): void;
-    removeListener(event: 'change', listener: () => void): void;
-};
-//# sourceMappingURL=handle.d.ts.map

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/components/TextEditor/extensions/hyperlinkDecoration.d.ts

@@ -1,11 +0,0 @@
-import { type RangeSet, StateField } from '@codemirror/state';
-type HyperlinkDecorationConfig = {
-    link?: boolean;
-};
-/**
- * Creates a state field to replace AST elements with a hyperlink widget.
- * https://codemirror.net/docs/ref/#state.StateField
- */
-export declare const hyperlinkDecoration: ({ link }?: HyperlinkDecorationConfig) => StateField<RangeSet<any>>;
-export {};
-//# sourceMappingURL=hyperlinkDecoration.d.ts.map

package/dist/types/src/components/TextEditor/extensions/hyperlinkDecoration.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hyperlinkDecoration.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/hyperlinkDecoration.ts"],"names":[],"mappings":"AAMA,OAAO,EAAoB,KAAK,QAAQ,EAAmB,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AA6CnH,KAAK,yBAAyB,GAAG;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,cAAc,yBAAyB,8BAMtE,CAAC"}

package/dist/types/src/components/TextEditor/extensions/hyperlinkWidget.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hyperlinkWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/hyperlinkWidget.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAEL,KAAK,aAAa,EAElB,cAAc,EACd,UAAU,EACV,KAAK,UAAU,EAChB,MAAM,kBAAkB,CAAC;AAuD1B,wBAAgB,kBAAkB;wBAGR,cAAc;;mBAOnB,UAAU;GAwB9B;AAED,eAAO,MAAM,cAAc,WAYzB,CAAC;AAEH,eAAO,MAAM,eAAe,EAAE,SAAkD,CAAC"}

package/src/automerge/automerge-plugin/handle.ts

@@ -1,14 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import type * as A from '@dxos/automerge/automerge';
-
-export type IDocHandle<T = any> = {
-  docSync(): A.Doc<T> | undefined;
-  change(callback: A.ChangeFn<T>, options?: A.ChangeOptions<T>): void;
-  changeAt(heads: A.Heads, callback: A.ChangeFn<T>, options?: A.ChangeOptions<T>): string[] | undefined;
-
-  addListener(event: 'change', listener: () => void): void;
-  removeListener(event: 'change', listener: () => void): void;
-};

package/src/components/TextEditor/extensions/hyperlinkDecoration.ts

@@ -1,99 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-// Copyright CodeMirror
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type RangeSet, RangeSetBuilder, StateField, type Transaction } from '@codemirror/state';
-import { Decoration, EditorView, WidgetType } from '@codemirror/view';
-
-// Adapted from:
-// https://codemirror.net/try/?c=aW1wb3J0IHsgYmFzaWNTZXR1cCwgRWRpdG9yVmlldyB9IGZyb20gImNvZGVtaXJyb3IiCmltcG9ydCB7IG1hcmtkb3duIH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZy1tYXJrZG93biIKaW1wb3J0IHsgc3ludGF4VHJlZSB9IGZyb20gIkBjb2RlbWlycm9yL2xhbmd1YWdlIjsKaW1wb3J0IHsgRWRpdG9yU3RhdGUsIFJhbmdlU2V0QnVpbGRlciwgU3RhdGVGaWVsZCB9IGZyb20gIkBjb2RlbWlycm9yL3N0YXRlIjsKaW1wb3J0IHsgRGVjb3JhdGlvbiwgV2lkZ2V0VHlwZSB9IGZyb20gIkBjb2RlbWlycm9yL3ZpZXciOwoKY2xhc3MgTGluayBleHRlbmRzIFdpZGdldFR5cGUgewogIGNvbnN0cnVjdG9yKHRleHQsIHVybCkgewogICAgc3VwZXIoKQogICAgdGhpcy50ZXh0ID0gdGV4dAogICAgdGhpcy51cmwgPSB1cmwKICB9CiAgZXEob3RoZXIpIHsgcmV0dXJuIHRoaXMudGV4dCA9PSBvdGhlci50ZXh0ICYmIHRoaXMudXJsID09IG90aGVyLnVybCB9CiAgdG9ET00oKSB7CiAgICBsZXQgbGluayA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImEiKQogICAgbGluay50ZXh0Q29udGVudCA9IHRoaXMudGV4dAogICAgbGluay5ocmVmID0gdGhpcy51cmwKICAgIHJldHVybiBsaW5rOwogIH0KfQoKbGV0IGRlY29yYXRpb25zRmllbGQgPSBTdGF0ZUZpZWxkLmRlZmluZSh7CiAgY3JlYXRlKCkgewogICAgcmV0dXJuIERlY29yYXRpb24ubm9uZTsKICB9LAogIHVwZGF0ZShfLCB0cikgewogICAgY29uc3QgYnVpbGRlciA9IG5ldyBSYW5nZVNldEJ1aWxkZXIoKTsKICAgIGxldCBjdXJzb3IgPSB0ci5zdGF0ZS5zZWxlY3Rpb24ubWFpbi5oZWFkOwogICAgc3ludGF4VHJlZSh0ci5zdGF0ZSkuaXRlcmF0ZSh7CiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmICgoY3Vyc29yIDwgbm9kZS5mcm9tIHx8IGN1cnNvciA+IG5vZGUudG8pICYmIG5vZGUubmFtZSA9PSAiTGluayIpIHsKICAgICAgICAgIGxldCBtYXJrcyA9IG5vZGUubm9kZS5nZXRDaGlsZHJlbigiTGlua01hcmsiKTsKICAgICAgICAgIGxldCB0ZXh0ID0gbWFya3MubGVuZ3RoID49IDIgPyB0ci5zdGF0ZS5zbGljZURvYyhtYXJrc1swXS50bywgbWFya3NbMV0uZnJvbSkgOiAiIgoKICAgICAgICAgIGxldCB1cmxOb2RlID0gbm9kZS5ub2RlLmdldENoaWxkKCJVUkwiKTsKICAgICAgICAgIGxldCB1cmwgPSB1cmxOb2RlID8gdHIuc3RhdGUuc2xpY2VEb2ModXJsTm9kZS5mcm9tLCB1cmxOb2RlLnRvKSA6ICIiCiAgICAgICAgICBidWlsZGVyLmFkZChub2RlLmZyb20sIG5vZGUudG8sIERlY29yYXRpb24ucmVwbGFjZSh7CiAgICAgICAgICAgIHdpZGdldDogbmV3IExpbmsodGV4dCwgdXJsKSwKICAgICAgICAgIH0pLAogICAgICAgICAgICAgICAgICAgICApOwogICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0KICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfSwKICAgIH0pOwogICAgcmV0dXJuIGJ1aWxkZXIuZmluaXNoKCk7CiAgfSwKICBwcm92aWRlOiAoZikgPT4gRWRpdG9yVmlldy5kZWNvcmF0aW9ucy5mcm9tKGYpLAp9KTsKCmxldCB2aWV3ID0gbmV3IEVkaXRvclZpZXcoewogIGRvYzogIiMgSGVsbG8gV29ybGRcblxuW1Rlc3RdKGh0dHBzOi8vZXhhbXBsZS5jb20pXG5cblxuIiwKICBleHRlbnNpb25zOiBbZGVjb3JhdGlvbnNGaWVsZCwgbWFya2Rvd24oKV0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5LAp9KTsKCnZpZXcuZm9jdXMoKTs=
-// https://discuss.codemirror.net/t/link-widget-is-clicked-only-if-editor-is-out-of-focus/7433
-
-// TODO(burdon): Adapt to make all markdown editable?
-
-// TODO(burdon): Research overlays.
-//  https://stackoverflow.com/questions/26933344/codemirror-detect-and-create-links-inside-editor
-//  https://codemirror.net/5/doc/manual.html#addOverlay
-//  https://codemirror.net/5/demo/simplemode.html
-//  https://codemirror.net/5/demo/search.html (Search dialog).
-
-class Link extends WidgetType {
-  constructor(private readonly _anchor: number, private readonly _text: string, private readonly _url?: string) {
-    super();
-  }
-
-  override eq(other: any) {
-    return this._text === other.text && this._url === other.url;
-  }
-
-  toDOM(view: EditorView) {
-    const link = document.createElement('a');
-    link.setAttribute('class', 'cm-link');
-    link.textContent = this._text;
-    if (this._url) {
-      link.setAttribute('target', '_blank');
-      link.href = this._url;
-    } else {
-      link.onclick = () => {
-        view.dispatch({
-          selection: {
-            anchor: this._anchor,
-          },
-        });
-      };
-    }
-
-    return link;
-  }
-}
-
-type HyperlinkDecorationConfig = {
-  link?: boolean;
-};
-
-/**
- * Creates a state field to replace AST elements with a hyperlink widget.
- * https://codemirror.net/docs/ref/#state.StateField
- */
-export const hyperlinkDecoration = ({ link }: HyperlinkDecorationConfig = {}) => {
-  return StateField.define<RangeSet<any>>({
-    create: (state) => update(state, link),
-    update: (_: RangeSet<any>, tr: Transaction) => update(tr.state, link),
-    provide: (field) => EditorView.decorations.from(field),
-  });
-};
-
-const update = (state: EditorState, link?: boolean) => {
-  const builder = new RangeSetBuilder();
-  const cursor = state.selection.main.head;
-  syntaxTree(state).iterate({
-    enter: (node) => {
-      // Check if cursor is inside text.
-      if (cursor < node.from || cursor > node.to) {
-        if (node.name === 'Link') {
-          const marks = node.node.getChildren('LinkMark');
-          const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : '';
-
-          const urlNode = node.node.getChild('URL');
-          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : '';
-
-          builder.add(
-            node.from,
-            node.to,
-            Decoration.replace({
-              widget: new Link(node.from, text, link ? url : undefined),
-            }),
-          );
-
-          return false;
-        }
-      }
-
-      return true;
-    },
-  });
-
-  return builder.finish();
-};