markdown: hide code start block

Author: Amelia Wattenberger

blocks/file-blocks/markdown-edit/copy-widget.tsx

@@ -89,6 +89,10 @@ export const copy = ({
     Decoration.mark({
       class: "cm-copy-html-tag",
     });
+  const instructionDecoration = () =>
+    Decoration.mark({
+      class: "cm-instruction",
+    });
   const rawLinkDecoration = (url: string) =>
     Decoration.mark({
       tagName: "a",
@@ -127,6 +131,10 @@ export const copy = ({
     Decoration.line({
       class: "cm-copy-blockquote",
     });
+  const codeBlockStartDecoration = () =>
+    Decoration.line({
+      class: "cm-code-start",
+    });
   const codeBlockDecoration = () =>
     Decoration.line({
       class: "cm-code",
@@ -198,6 +206,10 @@ export const copy = ({
             const newDecoration = linkDecoration(text, linkText, absoluteUrl);
             widgets.push(newDecoration.range(from, to));
           }
+        } else if (type.name === "CodeInfo") {
+          let text = state.doc.sliceString(from, to);
+          const newDecoration = instructionDecoration();
+          widgets.push(newDecoration.range(from, to));
         } else if (type.name === "URL") {
           let text = state.doc.sliceString(from, to);
           const endOfLink = /\)/.exec(text);
@@ -225,6 +237,9 @@ export const copy = ({
             const linePosition = state.doc.lineAt(i);
             widgets.push(newDecoration.range(linePosition.from));
           }
+          const newStartDecoration = codeBlockStartDecoration();
+          const previousLineFrom = state.doc.lineAt(fromLine.from - 1).from;
+          widgets.push(newStartDecoration.range(previousLineFrom));
           // widgets.push(newDecoration.range(from));
         } else if (["HTMLTag", "HTMLBlock"].includes(type.name)) {
           let text = state.doc.sliceString(from, to);

blocks/file-blocks/markdown-edit/style.css

@@ -234,6 +234,8 @@ html body div.cm-editor .cm-line::selection {
 .cm-activeLine .cm-instruction,
 .cm-activeLine .ͼu,
 .cm-activeLine .cm-image,
+.cm-activeLine + .cm-code-start,
+.cm-activeLine + .cm-code-start .cm-instruction,
 .cm-activeLine + .cm-image-container + .cm-line .cm-image,
 .cm-activeLine + .cm-image-container + .cm-line .cm-image-alt,
 .cm-activeLine + .cm-image-container + .cm-line .cm-instruction,