@dxos/react-ui-editor 0.4.10-main.0302e13 → 0.4.10-main.308cc0e

package/src/extensions/markdown/decorate.ts

@@ -81,7 +81,6 @@ 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,
@@ -104,103 +103,76 @@ const buildDecorations = (view: EditorView, options: DecorateOptions, focus: boo
       from,
       to,
       enter: (node) => {
-        switch (node.name) {
+        if (node.name === 'FencedCode') {
+          const editing = editingRange(state, node, focus);
           // FencedCode > CodeMark > [CodeInfo] > CodeText > CodeMark
-          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);
-              }
+          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;
           }
-
-          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,
+          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(
                 marks[1].from,
-                Decoration.mark({
-                  tagName: 'a',
-                  attributes: {
-                    class: 'cm-link',
-                    href: url,
-                    rel: 'noreferrer',
-                    target: '_blank',
-                  },
-                }),
+                node.to,
+                options.renderLinkButton
+                  ? Decoration.replace({ widget: new LinkButton(url, options.renderLinkButton) })
+                  : hide,
               );
-              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;
           }
-
-          case 'HorizontalRule': {
-            if (!editingRange(state, node, focus)) {
-              deco.add(node.from, node.to, horizontalRule);
-            }
-            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 '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 === 'HorizontalRule') {
+          if (!editingRange(state, node, focus)) {
+            deco.add(node.from, node.to, horizontalRule);
           }
-
-          case 'ListItem': {
-            const start = state.doc.lineAt(node.from);
-            deco.add(start.from, start.from, Decoration.line({ class: 'cm-list-item' }));
-            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);
           }
-
-          default: {
-            if (MarksByParent.has(node.name)) {
-              if (!editingRange(state, node.node.parent!, focus)) {
-                atomicDeco.add(node.from, node.to, hide);
-              }
-            }
+        } else if (MarksByParent.has(node.name)) {
+          if (!editingRange(state, node.node.parent!, focus)) {
+            atomicDeco.add(node.from, node.to, hide);
           }
         }
       },
@@ -252,6 +224,8 @@ 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(() => {
@@ -330,6 +304,4 @@ const formattingStyles = EditorView.baseTheme({
     marginLeft: '4px',
     marginRight: '4px',
   },
-
-  // '& .cm-list-item > span:nth-child(2)': {},
 });

package/src/extensions/markdown/formatting.ts

@@ -83,8 +83,9 @@ export enum List {
 // Headings
 //
 
-export const setHeading = (level: number): StateCommand => {
-  return ({ state, dispatch }) => {
+export const setHeading =
+  (level: number): StateCommand =>
+  ({ state, dispatch }) => {
     const {
       selection: { ranges },
       doc,
@@ -150,14 +151,14 @@ export const setHeading = (level: number): StateCommand => {
     );
     return true;
   };
-};
 
 //
 // Styles
 //
 
-export const setStyle = (type: Inline, enable: boolean): StateCommand => {
-  return ({ state, dispatch }) => {
+export const setStyle =
+  (type: Inline, enable: boolean): StateCommand =>
+  ({ 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.
@@ -321,14 +322,14 @@ export const setStyle = (type: Inline, enable: boolean): StateCommand => {
 
     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 => {
-  return (arg) => {
+export const toggleStyle =
+  (style: Inline): StateCommand =>
+  (arg) => {
     const form = getFormatting(arg.state);
     return setStyle(
       style,
@@ -341,7 +342,6 @@ export const toggleStyle = (style: Inline): StateCommand => {
             : !form.code,
     )(arg);
   };
-};
 
 export const toggleStrong = toggleStyle(Inline.Strong);
 export const toggleEmphasis = toggleStyle(Inline.Emphasis);
@@ -469,9 +469,10 @@ export const removeLink: StateCommand = ({ state, dispatch }) => {
   return true;
 };
 
-// Add link markup around the selection.
-export const addLink = ({ url, image }: { url?: string; image?: boolean } = {}): StateCommand => {
-  return ({ state, dispatch }) => {
+// Add link markup around the selection
+export const addLink =
+  ({ url, image }: { url?: string; image?: boolean } = {}): StateCommand =>
+  ({ state, dispatch }) => {
     const changes = state.changeByRange((range) => {
       let { from, to } = range;
       const cutStyles: SyntaxNode[] = [];
@@ -518,7 +519,7 @@ export const addLink = ({ url, image }: { url?: string; image?: boolean } = {}):
       }
 
       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);
@@ -550,34 +551,28 @@ export const addLink = ({ url, image }: { url?: string; image?: boolean } = {}):
         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 => {
-  return ({ state, dispatch }) => {
+export const addList =
+  (type: List): StateCommand =>
+  ({ 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,
@@ -609,7 +604,6 @@ export const addList = (type: List): StateCommand => {
             if (node.from === lastBlock) {
               return;
             }
-
             lastBlock = node.from;
             blocks.push({ node: node.node, counter, parentColumn });
             counter++;
@@ -644,6 +638,7 @@ export const addList = (type: List): StateCommand => {
             scrollIntoView: true,
           }),
         );
+
         return true;
       }
 
@@ -685,7 +680,7 @@ export const addList = (type: List): StateCommand => {
       }
 
       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;
@@ -705,7 +700,7 @@ export const addList = (type: List): StateCommand => {
         renumberListItems(next.firstChild, last.counter + 1, changes, state.doc);
       }
     }
-    ('Oeswe');
+
     const changeSet = state.changes(changes);
     dispatch(
       state.update({
@@ -717,10 +712,10 @@ export const addList = (type: List): StateCommand => {
     );
     return true;
   };
-};
 
-export const removeList = (type: List): StateCommand => {
-  return ({ state, dispatch }) => {
+export const removeList =
+  (type: List): StateCommand =>
+  ({ state, dispatch }) => {
     let lastBlock = -1;
     const changes: ChangeSpec[] = [];
     const stack: string[] = [];
@@ -776,16 +771,15 @@ export const removeList = (type: List): StateCommand => {
     dispatch(state.update({ changes, userEvent: 'format.list.remove', scrollIntoView: true }));
     return true;
   };
-};
 
-export const toggleList = (type: List): StateCommand => {
-  return (target) => {
+export const toggleList =
+  (type: List): StateCommand =>
+  (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) {
@@ -806,8 +800,9 @@ const renumberListItems = (item: SyntaxNode | null, counter: number, changes: Ch
 // Block quotes
 //
 
-export const setBlockquote = (enable: boolean): StateCommand => {
-  return ({ state, dispatch }) => {
+export const setBlockquote =
+  (enable: boolean): StateCommand =>
+  ({ state, dispatch }) => {
     const lines: Line[] = [];
     let lastBlock = -1;
     for (const { from, to } of state.selection.ranges) {
@@ -879,7 +874,6 @@ export const setBlockquote = (enable: boolean): StateCommand => {
     );
     return true;
   };
-};
 
 export const addBlockquote = setBlockquote(true);
 
@@ -950,10 +944,9 @@ export const addCodeblock: StateCommand = (target) => {
 };
 
 export const removeCodeblock: StateCommand = ({ state, dispatch }) => {
-  let lastBlock = -1;
-
-  // Find all code blocks, remove their markup.
   const changes: ChangeSpec[] = [];
+  let lastBlock = -1;
+  // Find all code blocks, remove their markup
   for (const { from, to } of state.selection.ranges) {
     syntaxTree(state).iterate({
       from,
@@ -972,7 +965,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 });
@@ -1057,7 +1050,7 @@ const Textblocks: { [name: string]: NonNullable<Formatting['blockType']> } = {
 };
 
 /**
- * Query the editor state for the active formatting at the selection.
+ * Query an 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,9 +183,7 @@ 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,6 +15,7 @@ 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.
 
@@ -81,21 +82,19 @@ const update = (state: EditorState, options: TableOptions) => {
   });
 
   tables.forEach((table) => {
-    const replace = state.readOnly || cursor < table.from || cursor > table.to;
-    if (replace) {
+    const hide = state.readOnly || cursor < table.from || cursor > table.to;
+    if (hide) {
       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();