Fixes #92: implements frontmatter syntax

web/editor.tsx

@@ -441,6 +441,7 @@ export class Editor {
           { selector: "BulletList", class: "sb-line-ul" },
           { selector: "OrderedList", class: "sb-line-ol" },
           { selector: "TableHeader", class: "sb-line-tbl-header" },
+          { selector: "FrontMatter", class: "sb-frontmatter" },
         ]),
         keymap.of([
           ...smartQuoteKeymap,

web/line_wrapper.ts

@@ -17,23 +17,23 @@ interface WrapElement {
 
 function wrapLines(view: EditorView, wrapElements: WrapElement[]) {
   let widgets: Range<Decoration>[] = [];
-  let elementStack: string[] = [];
+  const elementStack: string[] = [];
   const doc = view.state.doc;
   // Disabling the visible ranges for now, because it may be a bit buggy.
   // RISK: this may actually become slow for large documents.
-  for (let { from, to } of view.visibleRanges) {
+  for (const { from, to } of view.visibleRanges) {
     syntaxTree(view.state).iterate({
       from,
       to,
       enter: ({ type, from, to }) => {
-        for (let wrapElement of wrapElements) {
+        for (const wrapElement of wrapElements) {
           if (type.name == wrapElement.selector) {
             if (wrapElement.nesting) {
               elementStack.push(type.name);
             }
             const bodyText = doc.sliceString(from, to);
             let idx = from;
-            for (let line of bodyText.split("\n")) {
+            for (const line of bodyText.split("\n")) {
               let cls = wrapElement.class;
               if (wrapElement.nesting) {
                 cls = `${cls} ${cls}-${elementStack.length}`;
@@ -49,7 +49,7 @@ function wrapLines(view: EditorView, wrapElements: WrapElement[]) {
         }
       },
       leave({ type }) {
-        for (let wrapElement of wrapElements) {
+        for (const wrapElement of wrapElements) {
           if (type.name == wrapElement.selector && wrapElement.nesting) {
             elementStack.pop();
           }

web/smart_quotes.ts

@@ -1,7 +1,12 @@
 import { KeyBinding } from "./deps.ts";
 import { syntaxTree } from "../common/deps.ts";
 
-const straightQuoteContexts = ["CommentBlock", "FencedCode", "InlineCode"];
+const straightQuoteContexts = [
+  "CommentBlock",
+  "FencedCode",
+  "InlineCode",
+  "FrontMatterCode",
+];
 
 // TODO: Add support for selection (put quotes around or create blockquote block?)
 function keyBindingForQuote(
@@ -12,8 +17,8 @@ function keyBindingForQuote(
   return {
     key: quote,
     run: (target): boolean => {
-      let cursorPos = target.state.selection.main.from;
-      let chBefore = target.state.sliceDoc(cursorPos - 1, cursorPos);
+      const cursorPos = target.state.selection.main.from;
+      const chBefore = target.state.sliceDoc(cursorPos - 1, cursorPos);
 
       // Figure out the context, if in some sort of code/comment fragment don't be smart
       let node = syntaxTree(target.state).resolveInner(cursorPos);

web/styles/theme.scss

@@ -269,6 +269,11 @@
   padding-left: 2ch;
 }
 
+.sb-frontmatter {
+  background-color: rgba(255, 246, 189, 0.5);
+  color: #676767;
+}
+
 .sb-emphasis {
   font-style: italic;
 }