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

package/src/components/TextEditor/extensions/markdown/highlight.ts

@@ -8,8 +8,6 @@ import { tags, styleTags, Tag } from '@lezer/highlight';
 import { type MarkdownConfig } from '@lezer/markdown';
 import get from 'lodash.get';
 
-import { mx } from '@dxos/react-ui-theme';
-
 import {
   blockquote,
   bold,
@@ -24,11 +22,6 @@ import {
   tokens,
 } from '../../../../styles';
 
-// TODO(burdon): Style table in monospace.
-//  https://discuss.codemirror.net/t/markdown-table-highlighting/658
-
-// TODO(burdon): Readonly: use remark rather than hiding markup chars (which cursor can still move into).
-
 /**
  * Custom tags defined and processed by the GFM lezer extension.
  * https://github.com/lezer-parser/markdown
@@ -57,125 +50,118 @@ export const markdownTagsExtension: MarkdownConfig = {
  * Styling based on `lezer` parser tags.
  * https://codemirror.net/examples/styling
  * https://github.com/lezer-parser/highlight
- * https://lezer.codemirror.net/docs/ref/#highlight.tags (list of tags)
- *
- * Examples:
- * - https://github.com/codemirror/language/blob/main/src/highlight.ts#L194
- * - https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts#L115
+ * https://lezer.codemirror.net/docs/ref/#highlight (list of tags)
  */
-export const markdownHighlightStyle = (readonly?: boolean) =>
-  HighlightStyle.define(
-    [
-      {
-        tag: [
-          tags.keyword,
-          tags.name,
-          tags.deleted,
-          tags.character,
-          tags.propertyName,
-          tags.macroName,
-          tags.color,
-          tags.constant(tags.name),
-          tags.standard(tags.name),
-          tags.definition(tags.name),
-          tags.separator,
-          tags.typeName,
-          tags.className,
-          tags.number,
-          tags.changed,
-          tags.annotation,
-          tags.modifier,
-          tags.self,
-          tags.namespace,
-          tags.operator,
-          tags.operatorKeyword,
-          tags.escape,
-          tags.regexp,
-          tags.special(tags.string),
-          tags.meta,
-          tags.comment,
-          tags.atom,
-          tags.bool,
-          tags.special(tags.variableName),
-          tags.processingInstruction,
-          tags.string,
-          tags.inserted,
-          tags.invalid,
-        ],
-        color: 'inherit !important',
-      },
-
-      // Markdown marks.
-      {
-        tag: [
-          tags.meta,
-          tags.processingInstruction,
-          markdownTags.LinkLabel,
-          markdownTags.LinkReference,
-          markdownTags.ListMark,
-        ],
-        class: mark,
-      },
-
-      // Markdown marks.
-      {
-        tag: [markdownTags.CodeMark, markdownTags.HeaderMark, markdownTags.QuoteMark, markdownTags.EmphasisMark],
-        class: readonly ? 'hidden' : mark,
-      },
+export const markdownHighlightStyle = HighlightStyle.define(
+  [
+    {
+      tag: [
+        tags.keyword,
+        tags.name,
+        tags.deleted,
+        tags.character,
+        tags.propertyName,
+        tags.macroName,
+        tags.color,
+        tags.constant(tags.name),
+        tags.standard(tags.name),
+        tags.definition(tags.name),
+        tags.separator,
+        tags.typeName,
+        tags.className,
+        tags.number,
+        tags.changed,
+        tags.annotation,
+        tags.modifier,
+        tags.self,
+        tags.namespace,
+        tags.operator,
+        tags.operatorKeyword,
+        tags.escape,
+        tags.regexp,
+        tags.special(tags.string),
+        tags.meta,
+        tags.comment,
+        tags.atom,
+        tags.bool,
+        tags.special(tags.variableName),
+        tags.processingInstruction,
+        tags.string,
+        tags.inserted,
+        tags.invalid,
+      ],
+      color: 'inherit !important',
+    },
 
-      // E.g., code block language (after ```).
-      {
-        tag: [tags.function(tags.variableName), tags.labelName],
-        class: readonly ? 'hidden' : codeMark,
-      },
+    // Markdown marks.
+    {
+      tag: [
+        tags.meta,
+        tags.processingInstruction,
+        markdownTags.CodeMark,
+        markdownTags.EmphasisMark,
+        markdownTags.HeaderMark,
+        markdownTags.LinkLabel,
+        markdownTags.LinkReference,
+        markdownTags.ListMark,
+        markdownTags.QuoteMark,
+      ],
+      class: mark,
+    },
 
-      // Headings.
-      { tag: tags.heading1, class: heading(1, readonly) },
-      { tag: tags.heading2, class: heading(2, readonly) },
-      { tag: tags.heading3, class: heading(3, readonly) },
-      { tag: tags.heading4, class: heading(4, readonly) },
-      { tag: tags.heading5, class: heading(5, readonly) },
-      { tag: tags.heading6, class: heading(6, readonly) },
+    // Headings.
+    { tag: tags.heading1, class: heading[1] },
+    { tag: tags.heading2, class: heading[2] },
+    { tag: tags.heading3, class: heading[3] },
+    { tag: tags.heading4, class: heading[4] },
+    { tag: tags.heading5, class: heading[5] },
+    { tag: tags.heading6, class: heading[6] },
 
-      // Emphasis.
-      { tag: tags.emphasis, class: italic },
-      { tag: tags.strong, class: bold },
-      { tag: tags.strikethrough, class: strikethrough },
+    // Emphasis.
+    { tag: tags.emphasis, class: italic },
+    { tag: tags.strong, class: bold },
+    { tag: tags.strikethrough, class: strikethrough },
 
-      // Naked URLs.
-      {
-        tag: [markdownTags.URL],
-        class: inlineUrl,
-      },
+    // Naked URLs.
+    {
+      tag: [markdownTags.URL],
+      class: inlineUrl,
+    },
 
-      // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
-      // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
-      // when a language is specified. In this case, the syntax highlighting extensions will colorize
-      // the code, but all other CSS properties will be inherited.
-      // IMPORTANT: Therefore, the fenced code block will use the base editor font.
-      {
-        tag: [markdownTags.CodeText, markdownTags.InlineCode],
-        class: code,
-      },
+    // E.g., code block language (after ```).
+    {
+      tag: [tags.function(tags.variableName), tags.labelName],
+      class: codeMark,
+    },
 
-      {
-        tag: [markdownTags.QuoteMark],
-        class: blockquote,
-      },
+    // NOTE: The `markdown` extension configures extensions for `lezer` to parse markdown tokens (incl. below).
+    // However, since `codeLanguages` is also defined, the `lezer` will not parse fenced code blocks,
+    // when a language is specified. In this case, the syntax highlighting extensions will colorize
+    // the code, but all other CSS properties will be inherited.
+    // IMPORTANT: Therefore, the fenced code block will use the base editor font.
+    {
+      tag: [markdownTags.CodeText, markdownTags.InlineCode],
+      class: code,
+    },
 
-      {
-        tag: [markdownTags.HorizontalRule],
-        class: mx(horizontalRule, readonly && '-indent-[100rem]'),
-      },
+    {
+      tag: [markdownTags.QuoteMark],
+      class: blockquote,
+    },
 
-      // Main content, paragraphs, etc.
-      // {
-      //   tag: [tags.content],
-      //   fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-      // },
-    ],
     {
-      scope: markdownLanguage,
-      all: { fontFamily: get(tokens, 'fontFamily.body', []).join(',') },
+      tag: [markdownTags.HorizontalRule],
+      class: horizontalRule,
     },
-  );
+
+    // Main content, paragraphs, etc.
+    // {
+    //   tag: [tags.content],
+    //   fontFamily: get(tokens, 'fontFamily.body', []).join(','),
+    // },
+  ],
+  {
+    scope: markdownLanguage,
+    all: { fontFamily: get(tokens, 'fontFamily.body', []).join(',') },
+  },
+);

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

@@ -17,7 +17,7 @@ class CheckboxWidget extends WidgetType {
     private readonly _pos: number,
     private _checked: boolean,
     private readonly _indent: number,
-    private readonly _onCheck?: (check: boolean) => void,
+    private readonly _onCheck: (check: boolean) => void,
   ) {
     super();
   }
@@ -35,15 +35,10 @@ class CheckboxWidget extends WidgetType {
     const input = wrap.appendChild(document.createElement('input'));
     input.type = 'checkbox';
     input.checked = this._checked;
-    if (!this._onCheck) {
-      input.setAttribute('disabled', 'true');
-    }
-    if (this._onCheck) {
-      input.onchange = (event: Event) => {
-        this._onCheck?.((event.target as any).checked);
-        return true;
-      };
-    }
+    input.onchange = (event: Event) => {
+      this._onCheck((event.target as any).checked);
+      return true;
+    };
 
     return wrap;
   }
@@ -61,9 +56,7 @@ const styles = EditorView.baseTheme({
   },
 });
 
-export type TasklistOptions = {};
-
-export const tasklist = (options: TasklistOptions = {}) => {
+export const tasklist = () => {
   // TODO(burdon): Matcher isn't as precise as syntax tree.
   //  Allows for indents to be greater than AST would allow.
   const taskMatcher = new MatchDecorator({
@@ -72,27 +65,20 @@ export const tasklist = (options: TasklistOptions = {}) => {
       const indent = Math.floor(match[1].length / 2);
       const checked = match[2] === 'x' || match[2] === 'X';
       return Decoration.replace({
-        widget: new CheckboxWidget(
-          pos,
-          checked,
-          indent,
-          view.state.readOnly
-            ? undefined
-            : (checked) => {
-                const idx = pos + match[0].indexOf('[') + 1;
-                view.dispatch({
-                  changes: {
-                    from: idx,
-                    to: idx + 1,
-                    insert: checked ? 'x' : ' ',
-                  },
-                  // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
-                  selection: {
-                    anchor: idx + 3,
-                  },
-                });
-              },
-        ),
+        widget: new CheckboxWidget(pos, checked, indent, (checked) => {
+          const idx = pos + match[0].indexOf('[') + 1;
+          view.dispatch({
+            changes: {
+              from: idx,
+              to: idx + 1,
+              insert: checked ? 'x' : ' ',
+            },
+            // TODO(burdon): Restore cursor position? More useful to move to end of line (can indent).
+            selection: {
+              anchor: idx + 3,
+            },
+          });
+        }),
       });
     },
   });

package/src/components/TextEditor/themes/default.ts

@@ -10,11 +10,6 @@ import { tokens } from '../../../styles';
 /**
  * Minimal styles.
  * https://codemirror.net/examples/styling
- *
- * Examples:
- * - https://github.com/codemirror/view/blob/main/src/theme.ts
- * - https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts
- *
  * NOTE: Use one of '&', '&light', and '&dark' prefix to scope instance.
  * NOTE: `light` and `dark` selectors are preprocessed by CodeMirror and can only be in the base theme.
  */
@@ -141,55 +136,8 @@ export const defaultTheme: {
   '& .cm-tooltip': {
     border: 'none',
   },
-  '& .cm-tooltip-below': {},
-
-  //
-  // autocomplete
-  //
-  '& .cm-tooltip-autocomplete': {
-    marginTop: '4px',
-    marginLeft: '-3px',
-  },
-  '& .cm-tooltip-autocomplete ul li': {},
-  '& .cm-tooltip-autocomplete ul li[aria-selected]': {},
-  '& .cm-completionIcon': {
-    display: 'none',
-  },
-  '& .cm-completionLabel': {
-    fontFamily: get(tokens, 'fontFamily.body', []).join(','),
-  },
-  '& .cm-completionMatchedText': {
-    textDecoration: 'none',
-  },
-
-  //
-  // widgets
-  //
-  '& .cm-widgetBuffer': {
-    display: 'none',
-    height: 0,
-  },
-
-  //
-  // table
-  //
-  '& .cm-table-head': {
-    padding: '2px 16px 2px 0px',
-    borderBottom: `1px solid ${get(tokens, 'extend.colors.neutral.500')}`,
-    fontWeight: 100,
-    textAlign: 'left',
-    color: get(tokens, 'extend.colors.neutral.500'),
-  },
-  '& .cm-table-cell': {
-    padding: '2px 16px 2px 0px',
-  },
-
-  //
-  // image
-  //
-  '& .cm-image': {
-    margin: '0.5rem 0',
-  },
+  // '& .cm-tooltip-below': {},
+  // '& .cm-tooltip-autocomplete': {},
 
   //
   // font size

package/src/{hooks/yjs → components/TextEditor}/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 '../../components';
+import { MarkdownEditor } from './TextEditor';
 import { Replicator, useYjsModel } from '../../testing';
 
 export default {

package/src/styles/markdown.ts

@@ -7,18 +7,13 @@ import { mx } from '@dxos/react-ui-theme';
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 // https://tailwindcss.com/docs/font-weight
-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 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 text = 'text-neutral-800 dark:text-neutral-200';
@@ -42,8 +37,7 @@ 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-200 dark:border-neutral-800';
+export const horizontalRule = 'flex mlb-4 border-b text-neutral-100 dark:text-neutral-900 border-neutral-500/50';
 
 // 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/extensions/blast.d.ts

@@ -1,25 +0,0 @@
-import { type Extension } from '@codemirror/state';
-export type BlastOptions = {
-    effect?: number;
-    maxParticles: number;
-    particleGravity: number;
-    particleAlphaFadeout: number;
-    particleSize: {
-        min: number;
-        max: number;
-    };
-    particleNumRange: {
-        min: number;
-        max: number;
-    };
-    particleVelocityRange: {
-        x: [number, number];
-        y: [number, number];
-    };
-    particleShrinkRate: number;
-    shakeIntensity: number;
-    color?: () => number[];
-};
-export declare const defaultOptions: BlastOptions;
-export declare const blast: (options: Partial<BlastOptions>) => Extension;
-//# sourceMappingURL=blast.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"blast.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/blast.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,mBAAmB,CAAC;AAM/D,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,YAAY,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,gBAAgB,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C,qBAAqB,EAAE;QAAE,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAAC,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;IACpE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,YAS5B,CAAC;AAEF,eAAO,MAAM,KAAK,YAAa,QAAQ,YAAY,CAAC,KAAG,SAsEtD,CAAC"}

package/dist/types/src/components/TextEditor/extensions/image.d.ts

@@ -1,4 +0,0 @@
-import { type Extension } from '@codemirror/state';
-export type ImageOptions = {};
-export declare const image: (options?: ImageOptions) => Extension;
-//# sourceMappingURL=image.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/image.ts"],"names":[],"mappings":"AAKA,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,mBAAmB,CAAC;AAG3B,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC;AAE9B,eAAO,MAAM,KAAK,aAAa,YAAY,KAAQ,SAMlD,CAAC"}

package/dist/types/src/components/TextEditor/extensions/mention.d.ts

@@ -1,6 +0,0 @@
-import type { Extension } from '@codemirror/state';
-export type MentionOptions = {
-    onSearch: (text: string) => string[];
-};
-export declare const mention: ({ onSearch }: MentionOptions) => Extension;
-//# sourceMappingURL=mention.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"mention.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/mention.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,EAAE,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,OAAO,iBAAkB,cAAc,KAAG,SAmBtD,CAAC"}

package/dist/types/src/components/TextEditor/extensions/table.d.ts

@@ -1,8 +0,0 @@
-import { type RangeSet, StateField } from '@codemirror/state';
-export type TableOptions = {};
-/**
- * GFM tables.
- * https://github.github.com/gfm/#tables-extension
- */
-export declare const table: (options?: TableOptions) => StateField<RangeSet<any>>;
-//# sourceMappingURL=table.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../../../src/components/TextEditor/extensions/table.ts"],"names":[],"mappings":"AAKA,OAAO,EAAoB,KAAK,QAAQ,EAAmB,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AAMnH,MAAM,MAAM,YAAY,GAAG,EAAE,CAAC;AAE9B;;;GAGG;AACH,eAAO,MAAM,KAAK,aAAa,YAAY,8BAM1C,CAAC"}

package/dist/types/src/hooks/yjs/yjs.stories.d.ts.map

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