@dxos/react-ui-editor 0.3.11-main.474ad53 → 0.3.11-main.47fbf79

package/src/extensions/markdown/formatting.ts

@@ -27,10 +27,11 @@ import { useState, useMemo } from 'react';
 // the field only holds true when *all* selected text has the style,
 // or when the selection is a cursor inside such a style.
 export type Formatting = {
-  blankLine: boolean;
   // The type of the block at the selection.
   // If multiple different block types are selected, this will hold null.
   blockType:
+    | 'paragraph'
+    | 'tablecell'
     | 'codeblock'
     | 'heading1'
     | 'heading2'
@@ -38,11 +39,7 @@ export type Formatting = {
     | 'heading4'
     | 'heading5'
     | 'heading6'
-    | 'paragraph'
-    | 'tablecell'
     | null;
-  // Whether all selected text is wrapped in a blockquote.
-  blockQuote: boolean;
   // Whether the selected text is strong.
   strong: boolean;
   // Whether the selected text is emphasized.
@@ -55,6 +52,8 @@ export type Formatting = {
   link: boolean;
   // If all selected blocks have the same (innermost) list style, that is indicated here.
   listStyle: null | 'ordered' | 'bullet' | 'task';
+  // Whether all selected text is wrapped in a blockquote.
+  blockquote: boolean;
 };
 
 export const compareFormatting = (a: Formatting, b: Formatting) =>
@@ -65,7 +64,7 @@ export const compareFormatting = (a: Formatting, b: Formatting) =>
   a.code === b.code &&
   a.link === b.link &&
   a.listStyle === b.listStyle &&
-  a.blockQuote === b.blockQuote;
+  a.blockquote === b.blockquote;
 
 export enum Inline {
   Strong = 0,
@@ -134,7 +133,6 @@ export const setHeading =
     if (!changes.length) {
       return false;
     }
-
     dispatch(state.update({ changes, userEvent: 'format.setHeading', scrollIntoView: true }));
     return true;
   };
@@ -350,32 +348,18 @@ const skipSpaces = (pos: number, doc: Text, dir: -1 | 1, limit?: number) => {
   return pos;
 };
 
+//
+// Table
+//
+
 // TODO(burdon): Define and trigger snippets for codeblock, table, etc.
 const snippets = {
-  codeblock: snippet(
-    [
-      //
-      '```#{}',
-      '#{}',
-      '```',
-    ].join('\n'),
-  ),
+  codeblock: snippet(['```#{lang}', '#{}', '```'].join('\n')),
   table: snippet(
-    [
-      //
-      '| #{col1} | #{col2} |',
-      '| ---- | ---- |',
-      '| #{val1} | #{val2} |',
-      '| #{val3} | #{val4} |',
-      '',
-    ].join('\n'),
+    ['| #{col1} | #{col2} |', '| ---- | ---- |', '| #{val1} | #{val2} |', '| #{val3} | #{val4} |'].join('\n'),
   ),
 };
 
-//
-// Table
-//
-
 export const insertTable = (view: EditorView) => {
   const {
     selection: { main },
@@ -383,7 +367,6 @@ export const insertTable = (view: EditorView) => {
   } = view.state;
   const { number } = doc.lineAt(main.anchor);
   const { from } = doc.line(number);
-
   snippets.table(view, null, from, from);
 };
 
@@ -573,24 +556,6 @@ export const addList =
     }
 
     if (!blocks.length) {
-      // Insert a new list item if the selection is empty.
-      const { from, to } = state.doc.lineAt(state.selection.main.anchor);
-      if (from === to) {
-        dispatch(
-          state.update({
-            changes: [
-              {
-                from,
-                insert: type === List.Bullet ? '- ' : type === List.Ordered ? '1. ' : '- [ ] ',
-              },
-            ],
-            userEvent: 'format.list.add',
-            scrollIntoView: true,
-          }),
-        );
-        return true;
-      }
-
       return false;
     }
 
@@ -814,7 +779,7 @@ export const addBlockquote = setBlockquote(true);
 export const removeBlockquote = setBlockquote(false);
 
 export const toggleBlockquote: StateCommand = (target) => {
-  return (getFormatting(target.state).blockQuote ? removeBlockquote : addBlockquote)(target);
+  return (getFormatting(target.state).blockquote ? removeBlockquote : addBlockquote)(target);
 };
 
 //
@@ -1011,38 +976,38 @@ const InlineMarker: { [name: string]: number } = {
 };
 
 const IgnoreInline = new Set([
-  'Autolink',
-  'CodeMark',
-  'CodeText',
-  'Comment',
-  'EmphasisMark',
   'Hardbreak',
-  'HeaderMark',
   'HTMLTag',
-  'LinkMark',
-  'ListMark',
+  'Comment',
   'ProcessingInstruction',
+  'Autolink',
+  'HeaderMark',
   'QuoteMark',
+  'ListMark',
+  'LinkMark',
+  'EmphasisMark',
+  'CodeMark',
+  'CodeText',
   'StrikethroughMark',
-  'SubscriptMark',
-  'SuperscriptMark',
   'TaskMarker',
+  'SuperscriptMark',
+  'SubscriptMark',
 ]);
 
 const Textblocks: { [name: string]: NonNullable<Formatting['blockType']> } = {
+  Paragraph: 'paragraph',
+  Task: 'paragraph',
+  CodeBlock: 'codeblock',
+  FencedCode: 'codeblock',
   ATXHeading1: 'heading1',
   ATXHeading2: 'heading2',
   ATXHeading3: 'heading3',
   ATXHeading4: 'heading4',
   ATXHeading5: 'heading5',
   ATXHeading6: 'heading6',
-  CodeBlock: 'codeblock',
-  FencedCode: 'codeblock',
-  Paragraph: 'paragraph',
   SetextHeading1: 'heading1',
   SetextHeading2: 'heading2',
   TableCell: 'tablecell',
-  Task: 'paragraph',
 };
 
 /**
@@ -1056,7 +1021,7 @@ export const getFormatting = (state: EditorState): Formatting => {
   // null = no text seen, true = all text had the mark, false = saw text without it.
   const inline: (boolean | null)[] = [null, null, null, null];
   let link: boolean = false;
-  let blockQuote: boolean | null = null;
+  let blockquote: boolean | null = null;
   // False indicates mixed list styles
   let listStyle: Formatting['listStyle'] | null | false = null;
 
@@ -1178,10 +1143,10 @@ export const getFormatting = (state: EditorState): Formatting => {
               hasList = stack[i] === 'TaskList' ? 'task' : stack[i] === 'BulletList' ? 'bullet' : 'ordered';
             }
           }
-          if (blockQuote === null) {
-            blockQuote = hasQuote;
-          } else if (!hasQuote && blockQuote) {
-            blockQuote = false;
+          if (blockquote === null) {
+            blockquote = hasQuote;
+          } else if (!hasQuote && blockquote) {
+            blockquote = false;
           }
           if (listStyle === null) {
             listStyle = hasList;
@@ -1199,18 +1164,14 @@ export const getFormatting = (state: EditorState): Formatting => {
     });
   }
 
-  const { from, to } = state.doc.lineAt(selection.main.anchor);
-  const blankLine = from === to;
-
   return {
-    blankLine,
     blockType: blockType || null,
-    blockQuote: blockQuote ?? false,
-    code: inline[Inline.Code] ?? false,
-    emphasis: inline[Inline.Emphasis] ?? false,
     strong: inline[Inline.Strong] ?? false,
+    emphasis: inline[Inline.Emphasis] ?? false,
+    code: inline[Inline.Code] ?? false,
     strikethrough: inline[Inline.Strikethrough] ?? false,
     link,
+    blockquote: blockquote ?? false,
     listStyle: listStyle || null,
   };
 };