Use block wrappers for block elements (#1216)

Author: cyanzhong

CoreEditor/src/styling/helper.ts

@@ -1,6 +1,17 @@
-import { Decoration, DOMEventHandlers, EditorView, ViewPlugin } from '@codemirror/view';
+import { BlockWrapper, Decoration, DOMEventHandlers, EditorView, ViewPlugin } from '@codemirror/view';
 import { Range, RangeSet } from '@codemirror/state';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createBlockPlugin(builder: () => RangeSet<BlockWrapper>, eventHandlers?: DOMEventHandlers<any>) {
+  return ViewPlugin.fromClass(class {}, {
+    provide: () => EditorView.blockWrappers.of(editor => {
+      window.editor = editor;
+      return builder();
+    }),
+    eventHandlers,
+  });
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function createDecoPlugin(builder: () => RangeSet<Decoration>, eventHandlers?: DOMEventHandlers<any>) {
   return ViewPlugin.fromClass(class {}, {

CoreEditor/src/styling/matchers/lezer.ts

@@ -1,10 +1,26 @@
-import { Decoration } from '@codemirror/view';
-import { Range } from '@codemirror/state';
+import { BlockWrapper, Decoration } from '@codemirror/view';
+import { Range, RangeValue } from '@codemirror/state';
 import { syntaxTree } from '@codemirror/language';
 import { SyntaxNodeRef } from '@lezer/common';
 import { WidgetView } from '../views/types';
 import { lineDecoRanges } from '../helper';
 
+/**
+ * Build block wrappers by leveraging language lexers.
+ *
+ * @param nodeName Node name(s), such as "CodeBlock" for code blocks
+ * @param className Class to decorate the node
+ */
+export function createBlockWrappers(nodeName: string | string[], className: string, attributes?: { [key: string]: string }) {
+  return BlockWrapper.set(createNodeRanges(nodeName, node => BlockWrapper.create({
+    tagName: 'div',
+    attributes: {
+      'class': className,
+      ...attributes,
+    },
+  }).range(node.from, node.to)));
+}
+
 /**
  * Create mark decorations.
  *
@@ -53,8 +69,18 @@ export function createLineDeco(nodeName: string | string[], className: string, a
  * @param builder Closure to create the Decoration(s)
  */
 export function createDecos(nodeName: string | string[], builder: (node: SyntaxNodeRef) => Range<Decoration> | Range<Decoration>[] | null) {
+  return Decoration.set(createNodeRanges(nodeName, builder));
+}
+
+/**
+ * Build generic node ranges by leveraging language lexers.
+ *
+ * @param nodeName Node name(s), such as "ATXHeading1" for headings
+ * @param builder Closure to create the range(s)
+ */
+function createNodeRanges<T extends RangeValue>(nodeName: string | string[], builder: (node: SyntaxNodeRef) => Range<T> | Range<T>[] | null) {
   const editor = window.editor;
-  const ranges: Range<Decoration>[] = [];
+  const ranges: Range<T>[] = [];
   const nodeNames = Array.isArray(nodeName) ? nodeName : [nodeName];
 
   for (const { from, to } of editor.visibleRanges) {
@@ -69,5 +95,5 @@ export function createDecos(nodeName: string | string[], builder: (node: SyntaxN
     });
   }
 
-  return Decoration.set(ranges.sort((lhs, rhs) => lhs.from - rhs.from));
+  return ranges.sort((lhs, rhs) => lhs.from - rhs.from);
 }

CoreEditor/src/styling/nodes/code.ts

@@ -1,5 +1,5 @@
-import { createMarkDeco, createWidgetDeco, createLineDeco } from '../matchers/lezer';
-import { createDecoPlugin } from '../helper';
+import { createBlockWrappers, createMarkDeco, createWidgetDeco, createLineDeco } from '../matchers/lezer';
+import { createBlockPlugin, createDecoPlugin } from '../helper';
 import { PreviewWidget } from '../views';
 import { cancelDefaultEvent, PreviewType, showPreview } from '../../modules/preview';
 
@@ -11,16 +11,20 @@ export const inlineCodeStyle = createDecoPlugin(() => {
 });
 
 /**
- * Always use monospace font for FencedCode.
+ * Always use monospace font for FencedCode and CodeBlock.
  */
-export const codeBlockStyle = createDecoPlugin(() => {
-  return createLineDeco(['FencedCode', 'CodeBlock'], 'cm-md-monospace cm-md-codeBlock', {
-    'spellcheck': 'false',
-    'autocorrect': 'off',
-    'autocomplete': 'off',
-    'autocapitalize': 'off',
-  });
-});
+export const codeBlockStyle = (() => {
+  const nodeNames = ['FencedCode', 'CodeBlock'];
+  return [
+    createBlockPlugin(() => createBlockWrappers(nodeNames, 'cm-md-codeBlockWrapper', {
+      'spellcheck': 'false',
+      'autocorrect': 'off',
+      'autocomplete': 'off',
+      'autocapitalize': 'off',
+    })),
+    createDecoPlugin(() => createLineDeco(nodeNames, 'cm-md-monospace cm-md-codeBlock')),
+  ];
+})();
 
 /**
  * Enable [preview] button for https://mermaid.js.org/.

CoreEditor/src/styling/nodes/table.ts

@@ -1,14 +1,15 @@
-import { createLineDeco, createWidgetDeco } from '../matchers/lezer';
-import { createDecoPlugin } from '../helper';
+import { createBlockWrappers, createLineDeco, createWidgetDeco } from '../matchers/lezer';
+import { createBlockPlugin, createDecoPlugin } from '../helper';
 import { PreviewWidget } from '../views';
 import { cancelDefaultEvent, PreviewType, showPreview } from '../../modules/preview';
 
 /**
  * Always use monospace font for Table.
  */
-export const tableStyle = createDecoPlugin(() => {
-  return createLineDeco('Table', 'cm-md-monospace cm-md-table');
-});
+export const tableStyle = [
+  createBlockPlugin(() => createBlockWrappers('Table', 'cm-md-tableWrapper')),
+  createDecoPlugin(() => createLineDeco('Table', 'cm-md-monospace cm-md-table')),
+];
 
 /**
  * Enable [preview] button for GFM tables.