Review

Author: kazcw

MODULE.bazel.lock

@@ -1,6 +1,5 @@
 import { printTestInput, setupEditor } from '@/components/MarkdownEditor/__tests__/testInput'
 import {
-  canInsertCodeBlock,
   getBlockType,
   insertCodeBlock,
   removeCodeBlock,
@@ -387,7 +386,6 @@ test.each([
   },
 ])('Insert code block: $source', ({ source, expected }) => {
   const view = setupEditor(source)
-  expect(canInsertCodeBlock(view.state)).toBe(true)
   view.dispatch(insertCodeBlock(view.state))
   expect(getBlockType(view.state)).toBe('FencedCode')
   expect(printTestInput(view.state.doc.toString(), view.state.selection.main)).toEqual(expected)

app/gui/src/project-view/components/MarkdownEditor/__tests__/blockFormatting.test.ts

@@ -86,15 +86,6 @@ export function setBlockType(
   }
 }
 
-/**
- * @returns Whether {@link insertCodeBlock} is supported for the current cursor location or
- * selected range.
- */
-export function canInsertCodeBlock(_state: EditorState): boolean {
-  // TODO: Disable button when the cursor is already inside an unformattable block.
-  return true
-}
-
 /**
  * Insert a code block after the cursor, or if there is a selection convert the selected lines to a
  * code block.

app/gui/src/project-view/components/MarkdownEditor/codemirror/formatting/block.ts

@@ -1,6 +1,5 @@
 /** @file Provides a Vue reactive API for Markdown formatting in CodeMirror. */
 import {
-  canInsertCodeBlock,
   getBlockType,
   insertCodeBlock,
   removeCodeBlock,
@@ -24,6 +23,7 @@ export { type BlockType }
 interface ReactiveFormatting {
   inline: Record<InlineFormattingNode, Ref<boolean | undefined>>
   blockType: Ref<BlockType | undefined>
+  unformattable: Ref<boolean>
 }
 
 const reactiveFormattingFacet = Facet.define<ReactiveFormatting, ReactiveFormatting>({
@@ -47,8 +47,10 @@ export function useMarkdownFormatting(view: EditorView) {
     insertLink: computed(
       () => canInsertLink(view.state) && (() => view.dispatch(insertLink(view.state))),
     ),
-    insertCodeBlock: computed(
-      () => canInsertCodeBlock(view.state) && (() => view.dispatch(insertCodeBlock(view.state))),
+    insertCodeBlock: computed(() =>
+      reactiveFormatting.unformattable.value ?
+        undefined
+      : () => view.dispatch(insertCodeBlock(view.state)),
     ),
     blockType: proxyRefs({
       value: readonly(reactiveFormatting.blockType),
@@ -68,13 +70,14 @@ export function useMarkdownFormatting(view: EditorView) {
 
 /** Returns an extension that supports reactively watch the formatting of the selected text. */
 export function markdownFormatting(): Extension {
-  const reactiveFormatting = {
+  const reactiveFormatting: ReactiveFormatting = {
     inline: {
-      Emphasis: ref<boolean>(),
-      StrongEmphasis: ref<boolean>(),
-      Strikethrough: ref<boolean>(),
+      Emphasis: ref(),
+      StrongEmphasis: ref(),
+      Strikethrough: ref(),
     },
-    blockType: ref<BlockType | undefined>(),
+    blockType: ref(),
+    unformattable: ref(false),
   }
   const reactiveFormattingFacetExt = reactiveFormattingFacet.of(reactiveFormatting)
   return [
@@ -85,6 +88,7 @@ export function markdownFormatting(): Extension {
       for (const key of objects.unsafeKeys(reactiveFormatting.inline))
         reactiveFormatting.inline[key].value = formatting?.[key]
       reactiveFormatting.blockType.value = getBlockType(update.view.state)
+      reactiveFormatting.unformattable.value = formatting === undefined
     }),
   ]
 }

app/gui/src/project-view/components/MarkdownEditor/codemirror/formatting/index.ts

@@ -52,9 +52,9 @@ export function setInlineFormatting(
     changes,
     // TODO SelectionMapping
     //  `SelectionRange.map` produces a "valid" new selection based on the old selection and the
-    //  changes, but it isn't perfect. Once MDChangeBuilder's selection-adjusting logic is
-    //  consistently better than that sane default, we should switch to it and enable the checks of
-    //  after-edit selection boundaries `inlineFormatting.test.ts`.
+    //  changes, but it isn't perfect. Once MarkdownEdit's selection-adjusting logic is consistently
+    //  better than that sane default, we should switch to it and enable the checks of after-edit
+    //  selection boundaries `inlineFormatting.test.ts`.
     // selection: rangeToSelection(md.adjustedSelection),
     selection: state.selection.main.map(changes),
   }

app/gui/src/project-view/components/MarkdownEditor/codemirror/formatting/inline.ts

@@ -217,7 +217,8 @@ function skipForList(bl: CompositeBlock, cx: BlockContext, line: Line) {
 const DefaultSkipMarkup: {[type: number]: (bl: CompositeBlock, cx: BlockContext, line: Line) => boolean} = {
   [Type.Blockquote](bl, cx, line) {
     if (line.next != 62 /* '>' */) return false
-    let sAfter = space(line.text.charCodeAt(line.pos + 1)), size = sAfter ? 2 : 1
+    let sAfter = space(line.text.charCodeAt(line.pos + 1))
+    let size = sAfter ? 2 : 1
     line.markers.push(elt(Type.QuoteMark, cx.lineStart + line.pos, cx.lineStart + line.pos + (includeSpaceInDelimiterNode ? size : 1)))
     line.moveBase(line.pos + size)
     bl.end = cx.lineStart + line.text.length
@@ -484,17 +485,15 @@ const DefaultBlockParsers: {[name: string]: ((cx: BlockContext, line: Line) => B
   ATXHeading(cx, line) {
     let size = isAtxHeading(line)
     if (size < 0) return false
-    let level = size
-    if (includeSpaceInDelimiterNode && space(line.text.charCodeAt(size))) size += 1
     let off = line.pos, from = cx.lineStart + off
     let endOfSpace = skipSpaceBack(line.text, line.text.length, off), after = endOfSpace
     while (after > off && line.text.charCodeAt(after - 1) == line.next) after--
     if (after == endOfSpace || after == off || !space(line.text.charCodeAt(after - 1))) after = line.text.length
     let buf = cx.buffer
-      .write(Type.HeaderMark, 0, size)
+      .write(Type.HeaderMark, 0, size + (includeSpaceInDelimiterNode && space(line.text.charCodeAt(size)) ? 1 : 0))
       .writeElements(cx.parser.parseInline(line.text.slice(off + size + 1, after), from + size + 1), -from)
     if (after < line.text.length) buf.write(Type.HeaderMark, after - off, endOfSpace - off)
-    let node = buf.finish(Type.ATXHeading1 - 1 + level, line.text.length - off)
+    let node = buf.finish(Type.ATXHeading1 - 1 + size, line.text.length - off)
     cx.nextLine()
     cx.addNode(node, from)
     return true

app/lezer-markdown/src/markdown.ts

@@ -104,8 +104,7 @@ test.each([
     ],
     not: ['Document', ['OrderedList', ['ListItem', ['ListMark', '1.'], ['Paragraph', 'Numbered']]]],
   },
-  /*
-  { // FIXME
+  {
     source: '# *Formatted header*',
     expected: [
       'Document',
@@ -116,7 +115,6 @@ test.each([
       ],
     ],
   },
-   */
 ])('Syntax extension: Delimiter tokens include syntactic spaces: $source', checkTree)
 
 // === "Incomplete" syntax special cases ===