@dxos/react-ui-editor 0.4.5-main.519e45d → 0.4.5-main.5fcdf8d

package/src/extensions/markdown/link.ts

@@ -4,34 +4,196 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { hoverTooltip } from '@codemirror/view';
+import { type Extension, RangeSetBuilder } from '@codemirror/state';
+import {
+  hoverTooltip,
+  Decoration,
+  type DecorationSet,
+  type EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+  WidgetType,
+} from '@codemirror/view';
 import { type SyntaxNode } from '@lezer/common';
 
 import { tooltipContent } from '@dxos/react-ui-theme';
 
-export const linkTooltip = (render: (el: Element, url: string) => void) =>
-  hoverTooltip((view, pos, side) => {
-    const syntax = syntaxTree(view.state).resolveInner(pos, side);
-    let link = null;
-    for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
-      link = node.name === 'Link' ? node : null;
-    }
+// Adapted from:
+// https://codemirror.net/try/?c=aW1wb3J0IHsgYmFzaWNTZXR1cCwgRWRpdG9yVmlldyB9IGZyb20gImNvZGVtaXJyb3IiCmltcG9ydCB7IG1hcmtkb3duIH0gZnJvbSAiQGNvZGVtaXJyb3IvbGFuZy1tYXJrZG93biIKaW1wb3J0IHsgc3ludGF4VHJlZSB9IGZyb20gIkBjb2RlbWlycm9yL2xhbmd1YWdlIjsKaW1wb3J0IHsgRWRpdG9yU3RhdGUsIFJhbmdlU2V0QnVpbGRlciwgU3RhdGVGaWVsZCB9IGZyb20gIkBjb2RlbWlycm9yL3N0YXRlIjsKaW1wb3J0IHsgRGVjb3JhdGlvbiwgV2lkZ2V0VHlwZSB9IGZyb20gIkBjb2RlbWlycm9yL3ZpZXciOwoKY2xhc3MgTGluayBleHRlbmRzIFdpZGdldFR5cGUgewogIGNvbnN0cnVjdG9yKHRleHQsIHVybCkgewogICAgc3VwZXIoKQogICAgdGhpcy50ZXh0ID0gdGV4dAogICAgdGhpcy51cmwgPSB1cmwKICB9CiAgZXEob3RoZXIpIHsgcmV0dXJuIHRoaXMudGV4dCA9PSBvdGhlci50ZXh0ICYmIHRoaXMudXJsID09IG90aGVyLnVybCB9CiAgdG9ET00oKSB7CiAgICBsZXQgbGluayA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImEiKQogICAgbGluay50ZXh0Q29udGVudCA9IHRoaXMudGV4dAogICAgbGluay5ocmVmID0gdGhpcy51cmwKICAgIHJldHVybiBsaW5rOwogIH0KfQoKbGV0IGRlY29yYXRpb25zRmllbGQgPSBTdGF0ZUZpZWxkLmRlZmluZSh7CiAgY3JlYXRlKCkgewogICAgcmV0dXJuIERlY29yYXRpb24ubm9uZTsKICB9LAogIHVwZGF0ZShfLCB0cikgewogICAgY29uc3QgYnVpbGRlciA9IG5ldyBSYW5nZVNldEJ1aWxkZXIoKTsKICAgIGxldCBjdXJzb3IgPSB0ci5zdGF0ZS5zZWxlY3Rpb24ubWFpbi5oZWFkOwogICAgc3ludGF4VHJlZSh0ci5zdGF0ZSkuaXRlcmF0ZSh7CiAgICAgIGVudGVyOiAobm9kZSkgPT4gewogICAgICAgIGlmICgoY3Vyc29yIDwgbm9kZS5mcm9tIHx8IGN1cnNvciA+IG5vZGUudG8pICYmIG5vZGUubmFtZSA9PSAiTGluayIpIHsKICAgICAgICAgIGxldCBtYXJrcyA9IG5vZGUubm9kZS5nZXRDaGlsZHJlbigiTGlua01hcmsiKTsKICAgICAgICAgIGxldCB0ZXh0ID0gbWFya3MubGVuZ3RoID49IDIgPyB0ci5zdGF0ZS5zbGljZURvYyhtYXJrc1swXS50bywgbWFya3NbMV0uZnJvbSkgOiAiIgoKICAgICAgICAgIGxldCB1cmxOb2RlID0gbm9kZS5ub2RlLmdldENoaWxkKCJVUkwiKTsKICAgICAgICAgIGxldCB1cmwgPSB1cmxOb2RlID8gdHIuc3RhdGUuc2xpY2VEb2ModXJsTm9kZS5mcm9tLCB1cmxOb2RlLnRvKSA6ICIiCiAgICAgICAgICBidWlsZGVyLmFkZChub2RlLmZyb20sIG5vZGUudG8sIERlY29yYXRpb24ucmVwbGFjZSh7CiAgICAgICAgICAgIHdpZGdldDogbmV3IExpbmsodGV4dCwgdXJsKSwKICAgICAgICAgIH0pLAogICAgICAgICAgICAgICAgICAgICApOwogICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0KICAgICAgICByZXR1cm4gdHJ1ZTsKICAgICAgfSwKICAgIH0pOwogICAgcmV0dXJuIGJ1aWxkZXIuZmluaXNoKCk7CiAgfSwKICBwcm92aWRlOiAoZikgPT4gRWRpdG9yVmlldy5kZWNvcmF0aW9ucy5mcm9tKGYpLAp9KTsKCmxldCB2aWV3ID0gbmV3IEVkaXRvclZpZXcoewogIGRvYzogIiMgSGVsbG8gV29ybGRcblxuW1Rlc3RdKGh0dHBzOi8vZXhhbXBsZS5jb20pXG5cblxuIiwKICBleHRlbnNpb25zOiBbZGVjb3JhdGlvbnNGaWVsZCwgbWFya2Rvd24oKV0sCiAgcGFyZW50OiBkb2N1bWVudC5ib2R5LAp9KTsKCnZpZXcuZm9jdXMoKTs=
+// https://discuss.codemirror.net/t/link-widget-is-clicked-only-if-editor-is-out-of-focus/7433
+
+// TODO(burdon): Callback to dynamically lookup title of linked pages.
+export type LinkOptions = {
+  link?: boolean;
+  onHover?: (el: Element, url: string) => void;
+  onRender?: (el: Element, url: string) => void;
+};
+
+/**
+ * Creates a state field to replace AST elements with a hyperlink widget.
+ * https://codemirror.net/docs/ref/#state.StateField
+ */
+export const link = (options: LinkOptions = {}): Extension => {
+  const extensions: Extension[] = [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view, options);
+        }
+
+        update(update: ViewUpdate) {
+          if (update.docChanged || update.viewportChanged || update.selectionSet) {
+            this.decorations = buildDecorations(update.view, options);
+          }
+        }
+      },
+      {
+        decorations: (value) => value.decorations,
+      },
+    ),
+  ];
+
+  if (options.onHover) {
+    extensions.push(
+      // https://codemirror.net/examples/tooltip
+      // https://codemirror.net/docs/ref/#view.hoverTooltip
+      // https://github.com/codemirror/view/blob/main/src/tooltip.ts
+      hoverTooltip((view, pos, side) => {
+        const syntax = syntaxTree(view.state).resolveInner(pos, side);
+        let link = null;
+        for (let i = 0, node: SyntaxNode | null = syntax; !link && node && i < 5; node = node.parent, i++) {
+          link = node.name === 'Link' ? node : null;
+        }
+
+        const url = link && link.getChild('URL');
+        if (!url || !link) {
+          return null;
+        }
+
+        const urlText = view.state.sliceDoc(url.from, url.to);
+        return {
+          pos: link.from,
+          end: link.to,
+          above: true,
+          create: () => {
+            const el = document.createElement('div');
+            el.className = tooltipContent({}, 'pli-2 plb-1');
+            options.onHover!(el, urlText);
+            return { dom: el, offset: { x: 0, y: 4 } };
+          },
+        };
+      }),
+    );
+  }
+
+  return extensions;
+};
+
+class LinkButton extends WidgetType {
+  constructor(
+    private readonly _url: string,
+    private readonly _onAttach: LinkOptions['onRender'],
+  ) {
+    super();
+  }
 
-    const url = link && link.getChild('URL');
-    if (!url || !link) {
-      return null;
+  override eq(other: this) {
+    return this._url === other._url;
+  }
+
+  override toDOM(view: EditorView) {
+    const el = document.createElement('span');
+    this._onAttach!(el, this._url);
+    return el;
+  }
+}
+
+class LinkText extends WidgetType {
+  constructor(
+    private readonly _text: string,
+    private readonly _url?: string,
+  ) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this._url === other._url;
+  }
+
+  override toDOM(view: EditorView) {
+    const link = document.createElement('a');
+    link.setAttribute('class', 'cm-link');
+    link.textContent = this._text;
+    if (this._url) {
+      link.setAttribute('rel', 'noreferrer');
+      link.setAttribute('target', '_blank');
+      link.href = this._url;
+    } else {
+      link.onclick = () => {
+        view.dispatch({
+          selection: {
+            anchor: view.posAtDOM(link),
+          },
+        });
+      };
     }
 
-    const urlText = view.state.sliceDoc(url.from, url.to);
-    return {
-      pos: link.from,
-      end: link.to,
-      above: true,
-      create: () => {
-        const el = document.createElement('div');
-        el.className = tooltipContent({}, 'pli-2 plb-1');
-        render(el, urlText);
-        return { dom: el, offset: { x: 0, y: 4 } };
+    return link;
+  }
+}
+
+/**
+ * Range sets provide a data structure that can hold a collection of tagged,
+ * possibly overlapping ranges in such a way that they can efficiently be mapped though document changes.
+ * https://codemirror.net/docs/ref/#state
+ */
+const buildDecorations = (view: EditorView, options: LinkOptions): DecorationSet => {
+  const builder = new RangeSetBuilder<Decoration>();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        // Check if cursor is inside text.
+        if (node.name === 'Link') {
+          const marks = node.node.getChildren('LinkMark');
+          const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : '';
+          const urlNode = node.node.getChild('URL');
+          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : '';
+          if (!url) {
+            return false;
+          }
+
+          // TODO(burdon): Don't expand if moving cursor up/down.
+          if (!view.hasFocus || state.readOnly || cursor < node.from || cursor > node.to) {
+            builder.add(
+              node.from,
+              node.to,
+              Decoration.replace({
+                widget: new LinkText(text, options.link ? url : undefined),
+              }),
+            );
+          }
+
+          if (options.onRender) {
+            builder.add(
+              node.to,
+              node.to,
+              Decoration.replace({
+                widget: new LinkButton(url, options.onRender),
+              }),
+            );
+          }
+
+          return false;
+        }
       },
-    };
-  });
+      from,
+      to,
+    });
+  }
+
+  return builder.finish();
+};

package/src/extensions/markdown/tasklist.ts

@@ -0,0 +1,110 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { syntaxTree } from '@codemirror/language';
+import { RangeSetBuilder } from '@codemirror/state';
+import { EditorView, Decoration, WidgetType, ViewPlugin, type DecorationSet, type ViewUpdate } from '@codemirror/view';
+
+import { getToken } from '../../styles';
+
+// TODO(burdon): Reconcile with theme.
+const styles = EditorView.baseTheme({
+  '& .cm-task': {
+    color: getToken('extend.colors.blue.500'),
+  },
+  '& .cm-task-checkbox': {
+    marginLeft: '4px',
+    marginRight: '4px',
+  },
+});
+
+class CheckboxWidget extends WidgetType {
+  constructor(private _checked: boolean) {
+    super();
+  }
+
+  override eq(other: this) {
+    return this._checked === other._checked;
+  }
+
+  override toDOM(view: EditorView) {
+    const input = document.createElement('input');
+    input.className = 'cm-task-checkbox';
+    input.type = 'checkbox';
+    input.checked = this._checked;
+    if (view.state.readOnly) {
+      input.setAttribute('disabled', 'true');
+    } else {
+      input.onmousedown = (event: Event) => {
+        const pos = view.posAtDOM(input);
+        const text = view.state.sliceDoc(pos, pos + 3);
+        if (text === (this._checked ? '[x]' : '[ ]')) {
+          view.dispatch({
+            changes: { from: pos + 1, to: pos + 2, insert: this._checked ? ' ' : 'x' },
+          });
+          event.preventDefault();
+        }
+      };
+    }
+
+    return input;
+  }
+
+  override ignoreEvent() {
+    return false;
+  }
+}
+
+const checkedDecoration = Decoration.replace({ widget: new CheckboxWidget(true) });
+const uncheckedDecoration = Decoration.replace({ widget: new CheckboxWidget(false) });
+
+const buildDecorations = (view: EditorView): DecorationSet => {
+  const builder = new RangeSetBuilder<Decoration>();
+  const { state } = view;
+  const cursor = state.selection.main.head;
+
+  for (const { from, to } of view.visibleRanges) {
+    syntaxTree(state).iterate({
+      enter: (node) => {
+        if (node.name === 'TaskMarker') {
+          // Check if cursor is inside text.
+          if (cursor < node.from || cursor > node.to) {
+            const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
+            builder.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
+            builder.add(node.from, node.to, checked ? checkedDecoration : uncheckedDecoration);
+          }
+        }
+      },
+      from,
+      to,
+    });
+  }
+
+  return builder.finish();
+};
+
+export type TasklistOptions = {};
+
+export const tasklist = (options: TasklistOptions = {}) => {
+  return [
+    ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+        constructor(view: EditorView) {
+          this.decorations = buildDecorations(view);
+        }
+
+        update(update: ViewUpdate) {
+          if (update.docChanged || update.viewportChanged || update.selectionSet) {
+            this.decorations = buildDecorations(update.view);
+          }
+        }
+      },
+      {
+        decorations: (value) => value.decorations,
+      },
+    ),
+    styles,
+  ];
+};

package/dist/types/src/extensions/markdown/decorate.d.ts

@@ -1,5 +0,0 @@
-export interface DecorateOptions {
-    renderLinkButton?: (el: Element, url: string) => void;
-}
-export declare const decorateMarkdown: (options?: DecorateOptions) => import("@codemirror/state").Extension[];
-//# sourceMappingURL=decorate.d.ts.map

package/dist/types/src/extensions/markdown/decorate.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"decorate.d.ts","sourceRoot":"","sources":["../../../../../src/extensions/markdown/decorate.ts"],"names":[],"mappings":"AAgNA,MAAM,WAAW,eAAe;IAC9B,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED,eAAO,MAAM,gBAAgB,aAAa,eAAe,4CAqBxD,CAAC"}

package/src/extensions/markdown/decorate.ts

@@ -1,301 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { syntaxTree } from '@codemirror/language';
-import { RangeSetBuilder, type EditorState } from '@codemirror/state';
-import { EditorView, Decoration, type DecorationSet, WidgetType, ViewPlugin, type ViewUpdate } from '@codemirror/view';
-
-import { mx } from '@dxos/react-ui-theme';
-
-import { getToken } from '../../styles';
-
-/**
- * Widget for first/last line of code block (read-only).
- */
-// TODO(burdon): Add copy-to-clipboard button.
-class FencedCodeBoundary extends WidgetType {
-  constructor(private readonly _className: string) {
-    super();
-  }
-
-  override toDOM() {
-    const el = document.createElement('span');
-    el.innerHTML = ' ';
-    el.className = mx('cm-code cm-codeblock', this._className);
-    return el;
-  }
-}
-
-class HorizontalRuleWidget extends WidgetType {
-  override toDOM() {
-    const el = document.createElement('span');
-    el.className = 'cm-hr';
-    return el;
-  }
-}
-
-class LinkButton extends WidgetType {
-  constructor(
-    private readonly url: string,
-    private readonly render: (el: Element, url: string) => void,
-  ) {
-    super();
-  }
-
-  override eq(other: this) {
-    return this.url === other.url;
-  }
-
-  override toDOM(view: EditorView) {
-    const el = document.createElement('span');
-    this.render(el, this.url);
-    return el;
-  }
-}
-
-class CheckboxWidget extends WidgetType {
-  constructor(private _checked: boolean) {
-    super();
-  }
-
-  override eq(other: this) {
-    return this._checked === other._checked;
-  }
-
-  override toDOM(view: EditorView) {
-    const input = document.createElement('input');
-    input.className = 'cm-task-checkbox';
-    input.type = 'checkbox';
-    input.checked = this._checked;
-    if (view.state.readOnly) {
-      input.setAttribute('disabled', 'true');
-    } else {
-      input.onmousedown = (event: Event) => {
-        const pos = view.posAtDOM(input);
-        const text = view.state.sliceDoc(pos, pos + 3);
-        if (text === (this._checked ? '[x]' : '[ ]')) {
-          view.dispatch({
-            changes: { from: pos + 1, to: pos + 2, insert: this._checked ? ' ' : 'x' },
-          });
-          event.preventDefault();
-        }
-      };
-    }
-    return input;
-  }
-
-  override ignoreEvent() {
-    return false;
-  }
-}
-
-const hide = Decoration.replace({});
-const fencedCodeTop = Decoration.replace({ widget: new FencedCodeBoundary('cm-codeblock-end cm-codeblock-first') });
-const fencedCodeBottom = Decoration.replace({ widget: new FencedCodeBoundary('cm-codeblock-end cm-codeblock-last') });
-const horizontalRule = Decoration.replace({ widget: new HorizontalRuleWidget() });
-const checkedTask = Decoration.replace({ widget: new CheckboxWidget(true) });
-const uncheckedTask = Decoration.replace({ widget: new CheckboxWidget(false) });
-
-const editingRange = (state: EditorState, range: { from: number; to: number }) => {
-  const {
-    readOnly,
-    selection: {
-      main: { head },
-    },
-  } = state;
-  return !readOnly && head >= range.from && head <= range.to;
-};
-
-const MarksByParent = new Set(['CodeMark', 'EmphasisMark', 'StrikethroughMark', 'SubscriptMark', 'SuperscriptMark']);
-
-const buildDecorations = (view: EditorView, options: DecorateOptions): DecorationSet => {
-  const builder = new RangeSetBuilder<Decoration>();
-  const { state } = view;
-
-  for (const { from, to } of view.visibleRanges) {
-    syntaxTree(state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (node.name === 'FencedCode') {
-          const editing = editingRange(state, node);
-          // 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;
-            if (!editing && (first || last)) {
-              builder.add(block.from, block.to, first ? fencedCodeTop : fencedCodeBottom);
-            } else {
-              builder.add(
-                block.from,
-                block.from,
-                Decoration.line({
-                  class: mx('cm-code cm-codeblock-line', first && 'cm-codeblock-first', last && 'cm-codeblock-last'),
-                }),
-              );
-            }
-          }
-          return false;
-        } else if (node.name === 'Link') {
-          const marks = node.node.getChildren('LinkMark');
-          const urlNode = node.node.getChild('URL');
-          const editing = editingRange(state, node);
-          if (urlNode && marks.length >= 2) {
-            const url = state.sliceDoc(urlNode.from, urlNode.to);
-            if (!editing) {
-              builder.add(node.from, marks[0].to, hide);
-            }
-            builder.add(
-              marks[0].to,
-              marks[1].from,
-              Decoration.mark({
-                tagName: 'a',
-                attributes: {
-                  class: 'cm-link',
-                  href: url,
-                  rel: 'noreferrer',
-                  target: '_blank',
-                },
-              }),
-            );
-            if (!editing) {
-              builder.add(
-                marks[1].from,
-                node.to,
-                options.renderLinkButton
-                  ? Decoration.replace({
-                      widget: new LinkButton(url, options.renderLinkButton),
-                    })
-                  : hide,
-              );
-            }
-          }
-        } else if (node.name === 'HeaderMark') {
-          const parent = node.node.parent!;
-          if (/^ATX/.test(parent.name) && !editingRange(state, state.doc.lineAt(node.from))) {
-            const next = state.doc.sliceString(node.to, node.to + 1);
-            builder.add(node.from, node.to + (next === ' ' ? 1 : 0), hide);
-          }
-        } else if (node.name === 'HorizontalRule') {
-          if (!editingRange(state, node)) {
-            builder.add(node.from, node.to, horizontalRule);
-          }
-        } else if (node.name === 'TaskMarker') {
-          // Check if cursor is inside text.
-          if (!editingRange(state, node)) {
-            const checked = state.doc.sliceString(node.from + 1, node.to - 1) === 'x';
-            builder.add(node.from - 2, node.from - 1, Decoration.mark({ class: 'cm-task' }));
-            builder.add(node.from, node.to, checked ? checkedTask : uncheckedTask);
-          }
-        } else if (MarksByParent.has(node.name)) {
-          if (!editingRange(state, node.node.parent!)) {
-            builder.add(node.from, node.to, hide);
-          }
-        }
-      },
-    });
-  }
-
-  return builder.finish();
-};
-
-export interface DecorateOptions {
-  renderLinkButton?: (el: Element, url: string) => void;
-}
-
-export const decorateMarkdown = (options: DecorateOptions = {}) => {
-  return [
-    ViewPlugin.fromClass(
-      class {
-        decorations: DecorationSet;
-        constructor(view: EditorView) {
-          this.decorations = buildDecorations(view, options);
-        }
-
-        update(update: ViewUpdate) {
-          if (update.docChanged || update.selectionSet || update.viewportChanged) {
-            this.decorations = buildDecorations(update.view, options);
-          }
-        }
-      },
-      {
-        decorations: (value) => value.decorations,
-      },
-    ),
-    formattingStyles,
-  ];
-};
-
-const formattingStyles = EditorView.baseTheme({
-  '& .cm-code': {
-    fontFamily: getToken('fontFamily.mono', []).join(','),
-  },
-  '& .cm-codeblock-line': {
-    paddingInline: '1rem !important',
-  },
-
-  '& .cm-codeblock-end': {
-    display: 'inline-block',
-    width: '100%',
-    position: 'relative',
-    '&::after': {
-      position: 'absolute',
-      inset: 0,
-      content: '""',
-    },
-  },
-  '& .cm-codeblock-first': {
-    '&::after': {
-      borderTopLeftRadius: '.5rem',
-      borderTopRightRadius: '.5rem',
-    },
-  },
-  '& .cm-codeblock-last': {
-    '&::after': {
-      borderBottomLeftRadius: '.5rem',
-      borderBottomRightRadius: '.5rem',
-    },
-  },
-
-  '&light .cm-codeblock-line, &light .cm-activeLine.cm-codeblock-line': {
-    background: getToken('extend.semanticColors.input.light'),
-    mixBlendMode: 'darken',
-  },
-  '&dark .cm-codeblock-line, &dark .cm-activeLine.cm-codeblock-line': {
-    background: getToken('extend.semanticColors.input.dark'),
-    mixBlendMode: 'lighten',
-  },
-  '&light .cm-codeblock-first, &light .cm-codeblock-last': {
-    mixBlendMode: 'darken',
-    '&::after': {
-      background: getToken('extend.semanticColors.input.light'),
-    },
-  },
-  '&dark .cm-codeblock-first, &dark .cm-codeblock-last': {
-    mixBlendMode: 'lighten',
-    '&::after': {
-      background: getToken('extend.semanticColors.input.dark'),
-    },
-  },
-  '& .cm-hr': {
-    display: 'inline-block',
-    width: '100%',
-    height: '0',
-    verticalAlign: 'middle',
-    borderTop: `1px solid ${getToken('extend.colors.neutral.200')}`,
-  },
-  '& .cm-task': {
-    color: getToken('extend.colors.blue.500'),
-  },
-  '& .cm-task-checkbox': {
-    marginLeft: '4px',
-    marginRight: '4px',
-  },
-});