@dxos/react-ui-editor 0.4.10-main.fa5a270 → 0.4.10-main.fd8ea31

package/src/extensions/markdown/decorate.ts

@@ -81,6 +81,7 @@ const horizontalRule = Decoration.replace({ widget: new HorizontalRuleWidget() }
 const checkedTask = Decoration.replace({ widget: new CheckboxWidget(true) });
 const uncheckedTask = Decoration.replace({ widget: new CheckboxWidget(false) });
 
+// Check if cursor is inside text.
 const editingRange = (state: EditorState, range: { from: number; to: number }, focus: boolean) => {
   const {
     readOnly,
@@ -103,76 +104,103 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       from,
       to,
       enter: (node) => {
-        if (node.name === 'FencedCode') {
-          const editing = editingRange(state, node, focus);
+        switch (node.name) {
           // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
-          for (const block of view.viewportLineBlocks) {
-            if (block.to < node.from) {
-              continue;
-            }
-            if (block.from > node.to) {
-              break;
-            }
-            const first = block.from <= node.from;
-            const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
-            deco.add(block.from, block.from, first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine);
-            if (!editing && (first || last)) {
-              atomicDeco.add(block.from, block.to, hide);
+          case 'FencedCode': {
+            const editing = editingRange(state, node, focus);
+            for (const block of view.viewportLineBlocks) {
+              if (block.to < node.from) {
+                continue;
+              }
+              if (block.from > node.to) {
+                break;
+              }
+              const first = block.from <= node.from;
+              const last = block.to >= node.to && /^(\s>)*```$/.test(state.doc.sliceString(block.from, block.to));
+              deco.add(
+                block.from,
+                block.from,
+                first ? fencedCodeLineFirst : last ? fencedCodeLineLast : fencedCodeLine,
+              );
+              if (!editing && (first || last)) {
+                atomicDeco.add(block.from, block.to, hide);
+              }
             }
+            return false;
           }
-          return false;
-        } else if (node.name === 'Link') {
-          const marks = node.node.getChildren('LinkMark');
-          const urlNode = node.node.getChild('URL');
-          const editing = editingRange(state, node, focus);
-          if (urlNode && marks.length >= 2) {
-            const url = state.sliceDoc(urlNode.from, urlNode.to);
-            if (!editing) {
-              atomicDeco.add(node.from, marks[0].to, hide);
-            }
-            deco.add(
-              marks[0].to,
-              marks[1].from,
-              Decoration.mark({
-                tagName: 'a',
-                attributes: {
-                  class: 'cm-link',
-                  href: url,
-                  rel: 'noreferrer',
-                  target: '_blank',
-                },
-              }),
-            );
-            if (!editing) {
-              atomicDeco.add(
+
+          case 'Link': {
+            const marks = node.node.getChildren('LinkMark');
+            const urlNode = node.node.getChild('URL');
+            const editing = editingRange(state, node, focus);
+            if (urlNode && marks.length >= 2) {
+              const url = state.sliceDoc(urlNode.from, urlNode.to);
+              if (!editing) {
+                atomicDeco.add(node.from, marks[0].to, hide);
+              }
+              deco.add(
+                marks[0].to,
                 marks[1].from,
-                node.to,
-                options.renderLinkButton
-                  ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
-                  : hide,
+                Decoration.mark({
+                  tagName: 'a',
+                  attributes: {
+                    class: 'cm-link',
+                    href: url,
+                    rel: 'noreferrer',
+                    target: '_blank',
+                  },
+                }),
               );
+              if (!editing) {
+                atomicDeco.add(
+                  marks[1].from,
+                  node.to,
+                  options.renderLinkButton
+                    ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
+                    : hide,
+                );
+              }
+            }
+            break;
+          }
+
+          case 'HeaderMark': {
+            const parent = node.node.parent!;
+            if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from), focus)) {
+              const next = state.doc.sliceString(node.to, node.to + 1);
+              atomicDeco.add(node.from, node.to + (next === ' ' ? 1 : 0), hide);
             }
+            break;
           }
-        } else if (node.name === 'HeaderMark') {
-          const parent = node.node.parent!;
-          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from), focus)) {
-            const next = state.doc.sliceString(node.to, node.to + 1);
-            atomicDeco.add(node.from, node.to + (next === ' ' ? 1 : 0), hide);
+
+          case 'HorizontalRule': {
+            if (!editingRange(state, node, focus)) {
+              deco.add(node.from, node.to, horizontalRule);
+            }
+            break;
           }
-        } else if (node.name === 'HorizontalRule') {
-          if (!editingRange(state, node, focus)) {
-            deco.add(node.from, node.to, horizontalRule);
+
+          case 'TaskMarker': {
+            if (!editingRange(state, node, focus)) {
+              const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
+              atomicDeco.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
+              atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+            }
+            break;
           }
-        } else if (node.name === 'TaskMarker') {
-          // Check if cursor is inside text.
-          if (!editingRange(state, node, focus)) {
-            const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
-            atomicDeco.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
-            atomicDeco.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
+
+          case 'ListItem': {
+            const start = state.doc.lineAt(node.from);
+            deco.add(start.from, start.from, Decoration.line({ class: 'cm-list-item' }));
+            break;
           }
-        } else if (MarksByParent.has(node.name)) {
-          if (!editingRange(state, node.node.parent!, focus)) {
-            atomicDeco.add(node.from, node.to, hide);
+
+          default: {
+            if (MarksByParent.has(node.name)) {
+              if (!editingRange(state, node.node.parent!, focus)) {
+                atomicDeco.add(node.from, node.to, hide);
+              }
+            }
           }
         }
       },
@@ -224,8 +252,6 @@ export const decorateMarkdown = (options: DecorateOptions = {}) => {
           }
         }
 
-        // TODO(burdon): BUG: If the cursor is at the end of a link at the end of a line,
-        //  the cursor will float in space or be in the wrong position after the decoration is applied.
         scheduleUpdate(view: EditorView) {
           this.clearUpdate();
           this.pendingUpdate = setTimeout(() => {
@@ -304,4 +330,6 @@ const formattingStyles = EditorView.baseTheme({
     marginLeft: '4px',
     marginRight: '4px',
   },
+
+  // '& .cm-list-item > span:nth-child(2)': {},
 });

package/src/extensions/markdown/formatting.ts

@@ -83,9 +83,8 @@ export enum List {
 // Headings
 //
 
-export const setHeading =
-  (level: number): StateCommand =>
-  ({ state, dispatch }) => {
+export const setHeading = (level: number): StateCommand => {
+  return ({ state, dispatch }) => {
     const {
       selection: { ranges },
       doc,
@@ -151,14 +150,14 @@ export const setHeading =
     );
     return true;
   };
+};
 
 //
 // Styles
 //
 
-export const setStyle =
-  (type: Inline, enable: boolean): StateCommand =>
-  ({ state, dispatch }) => {
+export const setStyle = (type: Inline, enable: boolean): StateCommand => {
+  return ({ state, dispatch }) => {
     const marker = inlineMarkerText(type);
     const changes = state.changeByRange((range) => {
       // Special case for markers directly around the cursor, which will often not be parsed as valid styling.
@@ -322,14 +321,14 @@ export const setStyle =
 
     return true;
   };
+};
 
 export const addStyle = (style: Inline): StateCommand => setStyle(style, true);
 
 export const removeStyle = (style: Inline): StateCommand => setStyle(style, false);
 
-export const toggleStyle =
-  (style: Inline): StateCommand =>
-  (arg) => {
+export const toggleStyle = (style: Inline): StateCommand => {
+  return (arg) => {
     const form = getFormatting(arg.state);
     return setStyle(
       style,
@@ -342,6 +341,7 @@ export const toggleStyle =
             : !form.code,
     )(arg);
   };
+};
 
 export const toggleStrong = toggleStyle(Inline.Strong);
 export const toggleEmphasis = toggleStyle(Inline.Emphasis);
@@ -469,10 +469,9 @@ export const removeLink: StateCommand = ({ state, dispatch }) => {
   return true;
 };
 
-// Add link markup around the selection
-export const addLink =
-  ({ url, image }: { url?: string; image?: boolean } = {}): StateCommand =>
-  ({ state, dispatch }) => {
+// Add link markup around the selection.
+export const addLink = ({ url, image }: { url?: string; image?: boolean } = {}): StateCommand => {
+  return ({ state, dispatch }) => {
     const changes = state.changeByRange((range) => {
       let { from, to } = range;
       const cutStyles: SyntaxNode[] = [];
@@ -519,7 +518,7 @@ export const addLink =
       }
 
       const changes: ChangeSpec[] = [];
-      // Some changes must be moved to end of change array so that they are applied in the right order
+      // Some changes must be moved to end of change array so that they are applied in the right order.
       const changesAfter: ChangeSpec[] = [];
       // Clear existing links.
       removeLinkInner(from, to, changesAfter, state);
@@ -551,28 +550,34 @@ export const addLink =
         range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0)),
       };
     });
+
     if (changes.changes.empty) {
       return false;
     }
 
-    dispatch(state.update(changes, { userEvent: 'format.link.add', scrollIntoView: true }));
+    dispatch(
+      state.update(changes, {
+        userEvent: 'format.link.add',
+        scrollIntoView: true,
+      }),
+    );
     return true;
   };
+};
 
 //
 // Lists
 //
 
-export const addList =
-  (type: List): StateCommand =>
-  ({ state, dispatch }) => {
+export const addList = (type: List): StateCommand => {
+  return ({ state, dispatch }) => {
     let lastBlock = -1;
     let counter = 1;
     let first = true;
     let parentColumn: number | null = null;
-    const blocks: { node: SyntaxNode; counter: number; parentColumn: number | null }[] = [];
 
     // Scan the syntax tree to locate textblocks that can be wrapped.
+    const blocks: { node: SyntaxNode; counter: number; parentColumn: number | null }[] = [];
     for (const { from, to } of state.selection.ranges) {
       syntaxTree(state).iterate({
         from,
@@ -604,6 +609,7 @@ export const addList =
             if (node.from === lastBlock) {
               return;
             }
+
             lastBlock = node.from;
             blocks.push({ node: node.node, counter, parentColumn });
             counter++;
@@ -638,7 +644,6 @@ export const addList =
             scrollIntoView: true,
           }),
         );
-
         return true;
       }
 
@@ -680,7 +685,7 @@ export const addList =
       }
 
       changes.push({ from: nodeFrom, insert: mark });
-      // Add indentation for the other lines in this block
+      // Add indentation for the other lines in this block.
       while (line.to < node.to) {
         line = state.doc.lineAt(line.to + 1);
         const open = /^[\s>]*/.exec(line.text)![0].length;
@@ -700,7 +705,7 @@ export const addList =
         renumberListItems(next.firstChild, last.counter + 1, changes, state.doc);
       }
     }
-
+    ('Oeswe');
     const changeSet = state.changes(changes);
     dispatch(
       state.update({
@@ -712,10 +717,10 @@ export const addList =
     );
     return true;
   };
+};
 
-export const removeList =
-  (type: List): StateCommand =>
-  ({ state, dispatch }) => {
+export const removeList = (type: List): StateCommand => {
+  return ({ state, dispatch }) => {
     let lastBlock = -1;
     const changes: ChangeSpec[] = [];
     const stack: string[] = [];
@@ -771,15 +776,16 @@ export const removeList =
     dispatch(state.update({ changes, userEvent: 'format.list.remove', scrollIntoView: true }));
     return true;
   };
+};
 
-export const toggleList =
-  (type: List): StateCommand =>
-  (target) => {
+export const toggleList = (type: List): StateCommand => {
+  return (target) => {
     const formatting = getFormatting(target.state);
     const active =
       formatting.listStyle === (type === List.Bullet ? 'bullet' : type === List.Ordered ? 'ordered' : 'task');
     return (active ? removeList(type) : addList(type))(target);
   };
+};
 
 const renumberListItems = (item: SyntaxNode | null, counter: number, changes: ChangeSpec[], doc: Text) => {
   for (; item; item = item.nextSibling) {
@@ -800,9 +806,8 @@ const renumberListItems = (item: SyntaxNode | null, counter: number, changes: Ch
 // Block quotes
 //
 
-export const setBlockquote =
-  (enable: boolean): StateCommand =>
-  ({ state, dispatch }) => {
+export const setBlockquote = (enable: boolean): StateCommand => {
+  return ({ state, dispatch }) => {
     const lines: Line[] = [];
     let lastBlock = -1;
     for (const { from, to } of state.selection.ranges) {
@@ -874,6 +879,7 @@ export const setBlockquote =
     );
     return true;
   };
+};
 
 export const addBlockquote = setBlockquote(true);
 
@@ -944,9 +950,10 @@ export const addCodeblock: StateCommand = (target) => {
 };
 
 export const removeCodeblock: StateCommand = ({ state, dispatch }) => {
-  const changes: ChangeSpec[] = [];
   let lastBlock = -1;
-  // Find all code blocks, remove their markup
+
+  // Find all code blocks, remove their markup.
+  const changes: ChangeSpec[] = [];
   for (const { from, to } of state.selection.ranges) {
     syntaxTree(state).iterate({
       from,
@@ -965,7 +972,7 @@ export const removeCodeblock: StateCommand = ({ state, dispatch }) => {
               });
             }
           } else {
-            // Indented code block
+            // Indented code block.
             const column = node.from - firstLine.from;
             for (let line = firstLine; ; line = state.doc.line(line.number + 1)) {
               changes.push({ from: line.from + column - 4, to: line.from + column });
@@ -1050,7 +1057,7 @@ const Textblocks: { [name: string]: NonNullable<Formatting['blockType']> } = {
 };
 
 /**
- * Query an editor state for the active formatting at the selection.
+ * Query the editor state for the active formatting at the selection.
  */
 export const getFormatting = (state: EditorState): Formatting => {
   // These will track the formatting we've seen so far.

package/src/extensions/markdown/highlight.ts

@@ -183,7 +183,9 @@ export const markdownHighlightStyle = (readonly?: boolean) => {
     ],
     {
       scope: markdownLanguage,
-      all: { fontFamily: getToken('fontFamily.body', []).join(',') },
+      all: {
+        fontFamily: getToken('fontFamily.body', []).join(','),
+      },
     },
   );
 };

package/src/extensions/markdown/table.ts

@@ -15,7 +15,6 @@ import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 
 // TODO(burdon): Snippet to create basic table.
 //  https://codemirror.net/docs/ref/#autocomplete.snippet
-
 // TODO(burdon): Advanced formatting (left/right/center).
 // TODO(burdon): Editor to auto balance columns.
 
@@ -82,19 +81,21 @@ const update = (state: EditorState, options: TableOptions) => {
   });
 
   tables.forEach((table) => {
-    const hide = state.readOnly || cursor < table.from || cursor > table.to;
-    if (hide) {
+    const replace = state.readOnly || cursor < table.from || cursor > table.to;
+    if (replace) {
       builder.add(
         table.from,
         table.to,
         Decoration.replace({
+          block: true,
           widget: new TableWidget(table),
         }),
       );
+    } else {
+      // Add class for styling.
+      // TODO(burdon): Apply to each line?
+      builder.add(table.from, table.to, Decoration.mark({ class: 'cm-table' }));
     }
-
-    // Add class for styling.
-    builder.add(table.from, table.to, Decoration.mark({ class: 'cm-table' }));
   });
 
   return builder.finish();

package/src/hooks/index.ts

@@ -3,5 +3,4 @@
 //
 
 export * from './useActionHandler';
-export * from './useDocAccessor';
 export * from './useTextEditor';

package/src/hooks/useTextEditor.ts

@@ -36,9 +36,9 @@ export const useTextEditor = (cb: () => UseTextEditorProps = () => ({}), deps: D
       log('create', { id });
 
       // https://codemirror.net/docs/ref/#state.EditorStateConfig
+      // NOTE: Don't set selection here in case it is invalid (and crashes the state); dispatch below.
       const state = EditorState.create({
         doc,
-        selection,
         extensions: [
           id && documentId.of(id),
           // TODO(burdon): Doesn't catch errors in keymap functions.

package/dist/types/src/hooks/useDocAccessor.d.ts

@@ -1,9 +0,0 @@
-import { type DocAccessor, type TextObject, type EchoReactiveObject } from '@dxos/echo-schema';
-export declare const useDocAccessor: <T = any>(text: TextObject | EchoReactiveObject<{
-    content: string;
-}>) => {
-    id: string;
-    doc: string | undefined;
-    accessor: DocAccessor<T>;
-};
-//# sourceMappingURL=useDocAccessor.d.ts.map

package/dist/types/src/hooks/useDocAccessor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDocAccessor.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDocAccessor.ts"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,WAAW,EAEhB,KAAK,UAAU,EACf,KAAK,kBAAkB,EACxB,MAAM,mBAAmB,CAAC;AAG3B,eAAO,MAAM,cAAc,kBACnB,UAAU,GAAG,mBAAmB;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;QACnD,MAAM;SAAO,MAAM,GAAG,SAAS;;CASvC,CAAC"}

package/src/hooks/useDocAccessor.ts

@@ -1,27 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { useMemo } from 'react';
-
-import {
-  createDocAccessor,
-  type DocAccessor,
-  getTextContent,
-  type TextObject,
-  type EchoReactiveObject,
-} from '@dxos/echo-schema';
-
-// TODO(burdon): Factor out.
-export const useDocAccessor = <T = any>(
-  text: TextObject | EchoReactiveObject<{ content: string }>,
-): { id: string; doc: string | undefined; accessor: DocAccessor<T> } => {
-  return useMemo(
-    () => ({
-      id: text.id,
-      doc: getTextContent(text),
-      accessor: createDocAccessor<T>(text),
-    }),
-    [text],
-  );
-};