overhauled editor overlay

docs/keyboardShortcuts.md

@@ -2,7 +2,8 @@
 
 _Note: on MacOS you can also use_ `CMD` _wherever you would use_ `Ctrl`
 
-| Shortcut       | Context        | Description                                                        |
-|----------------|----------------|--------------------------------------------------------------------|
-| `Ctrl + Enter` | Query editor   | Submit the query set containing the text cursor                    |
-| `A`            | Search results | While hovering over a card, add that card to your saved cards list | 
+| Shortcut       | Context        | Description                                                                                           |
+|----------------|----------------|-------------------------------------------------------------------------------------------------------|
+| `Ctrl + Enter` | Query editor   | Submit the query set containing the text cursor                                                       |
+| `Ctrl + \`     | Query editor   | Toggle the editor overlay. The overlay contains useful links related to query syntax, cubes, and sets |
+| `A`            | Search results | While hovering over a card, add that card to your saved cards list                                    | 

docs/syntaxExtensions/mode.md

@@ -1,6 +1,6 @@
 ### @defaultMode
 
-`@defaultMode` changes how the parser interprets a query-set.
+`@defaultMode` changes how the parser interprets a query set.
 this directive should be placed in its own paragraph.
 
 possible values:

docs/syntaxExtensions/venn.md

@@ -8,7 +8,7 @@
 o:"+1/+1 counter"
 ci:gw c>0
 
-# This is especially helpful for comparing cube lists.
-# See the 'data' tab to manage your cube lists.
-@venn(cube:soskgy)(cube:blue-cube)
+# This is especially helpful for comparing cube lists using the
+# cube oracle (`cubeo`) filter. See the 'cube' tab to manage your cube lists.
+@venn(cubeo:soskgy)(cubeo:blue-cube)
 ```

docs/syntaxExtensions/rank.md → docs/syntaxExtensions/weight.md

@@ -1,10 +1,10 @@
-### @defaultRank
+### @defaultWeight
 
-`@defaultRank` changes how the aggregator weighs each subquery in a query-set.
+`@defaultWeight` changes how the aggregator weighs each subquery in a query set.
 this directive should be placed in its own paragraph.
 
 possible values:
 - `zipf (%)`: default behavior. queries are weighted by a zipf distribution `f(x) = (1/1+x)`
-- `ord (#)`: queries are weighted by `f(x) = len(query-set) - x`
+- `ord (#)`: queries are weighted by `f(x) = len(query set) - x`
 - `uniform (=)`: all queries have the same weight. `f(x) = 1`
 

package.json

@@ -73,7 +73,7 @@
     "lodash": "^4.17.21",
     "mana-font": "^1.15.4",
     "moo": "^0.5.2",
-    "mtgql": "^1.3.2",
+    "mtgql": "^1.3.3",
     "nearley": "^2.20.1",
     "neverthrow": "^6.0.0",
     "prismjs": "^1.29.0",

src/api/local/syntaxDocs.ts

@@ -2,6 +2,10 @@ import { FilterKeyword } from 'mtgql'
 
 export const syntaxDocs: Record<FilterKeyword, string> = {
   '!': 'https://scryfall.com/docs/syntax#exact',
+  "++": "https://scryfall.com/docs/syntax#display",
+  "@@": "https://scryfall.com/docs/syntax#display",
+  and: "/user-guide/query-syntax#and-and-or-operators",
+  or: "/user-guide/query-syntax#and-and-or-operators",
   a: 'https://scryfall.com/docs/syntax#flavor',
   art: 'https://scryfall.com/docs/syntax#tagger',
   artist: 'https://scryfall.com/docs/syntax#flavor',
@@ -18,6 +22,7 @@ export const syntaxDocs: Record<FilterKeyword, string> = {
   color: 'https://scryfall.com/docs/syntax#colors',
   commander: 'https://scryfall.com/docs/syntax#colors',
   cube: 'https://scryfall.com/docs/syntax#cubes',
+  cubeo: 'https://scryfall.com/docs/syntax#cubes',
   date: 'https://scryfall.com/docs/syntax#year',
   devotion: 'https://scryfall.com/docs/syntax#mana',
   direction: 'https://scryfall.com/docs/syntax#display',
@@ -32,12 +37,13 @@ export const syntaxDocs: Record<FilterKeyword, string> = {
   ft: 'https://scryfall.com/docs/syntax#flavor',
   function: 'https://scryfall.com/docs/syntax#tagger',
   game: 'https://scryfall.com/docs/syntax#promos',
-  has: 'https://scryfall.com/docs/syntax#',
+  has: '/user-guide/query-syntax#is',
   id: 'https://scryfall.com/docs/syntax#colors',
   identity: 'https://scryfall.com/docs/syntax#colors',
   in: 'https://scryfall.com/docs/syntax#sets',
   include: 'https://scryfall.com/docs/syntax#extras',
   is: '/user-guide/query-syntax#is',
+  kw: 'https://scryfall.com/docs/syntax#oracle',
   keyword: 'https://scryfall.com/docs/syntax#oracle',
   lang: 'https://scryfall.com/docs/syntax#languages',
   language: 'https://scryfall.com/docs/syntax#languages',
@@ -50,7 +56,7 @@ export const syntaxDocs: Record<FilterKeyword, string> = {
   mv: 'https://scryfall.com/docs/syntax#mana',
   name: 'https://scryfall.com/docs/syntax#regex',
   new: 'https://scryfall.com/docs/syntax#rarity',
-  not: 'https://scryfall.com/docs/syntax#negating',
+  not: '/user-guide/query-syntax#is',
   number: 'https://scryfall.com/docs/syntax#sets',
   o: 'https://scryfall.com/docs/syntax#oracle',
   oracle: 'https://scryfall.com/docs/syntax#oracle',
@@ -82,3 +88,16 @@ export const syntaxDocs: Record<FilterKeyword, string> = {
   wm: 'https://scryfall.com/docs/syntax#flavor',
   year: 'https://scryfall.com/docs/syntax#year',
 }
+
+export const extensionDocs = {
+  alias: "/user-guide/syntax-extension#@alias-&-@use",
+  a: "/user-guide/syntax-extension#@alias-&-@use",
+  defaultMode: "/user-guide/syntax-extension#@defaultmode",
+  dm: "/user-guide/syntax-extension#@defaultmode",
+  defaultWeight: "/user-guide/syntax-extension#@defaultweight",
+  dw: "/user-guide/syntax-extension#@defaultweight",
+  include: "/user-guide/syntax-extension#@include",
+  i: "/user-guide/syntax-extension#@include",
+  use: "/user-guide/syntax-extension#@alias-&-@use",
+  venn: "/user-guide/syntax-extension#@venn-diagram-search"
+}

src/api/local/syntaxHighlighting.ts

@@ -2,7 +2,8 @@ import React from 'react'
 import Prism, { Environment, Grammar } from 'prismjs'
 import 'prismjs/components/prism-regex.js'
 import { FILTER_KEYWORDS, KEYWORDS_TO_IMPLEMENT, OPERATORS } from 'mtgql'
-import { syntaxDocs } from './syntaxDocs'
+import { extensionDocs, syntaxDocs } from './syntaxDocs'
+import { Router as RemixRouter } from '@remix-run/router'
 
 export type Language = 'regex' | 'scryfall' | 'scryfall-extended' | 'scryfall-extended-multi'
 const keywordRegex = Object.values(FILTER_KEYWORDS).join('|')
@@ -28,6 +29,28 @@ export const scryfall: Grammar = {
     alias: 'deleted',
     greedy: true,
   },
+  quotedCube: {
+    pattern: /(\b(?:cube|cubeo):)("[^"]*"|'[^']*')/,
+    greedy: true,
+    lookbehind: true,
+    alias: 'function',
+  },
+  quotedSet: {
+    pattern: /(\b(?:set|s|edition|e):)("[^"]*"|'[^']*')/,
+    greedy: true,
+    lookbehind: true,
+    alias: 'function',
+  },
+  cubeString: {
+    pattern: /(\b(?:cube|cubeo):)[^\s#)(]+(?=(\b|$))/i,
+    lookbehind: true,
+    alias: "string",
+  },
+  setString: {
+    pattern: /(\b(?:set|s|edition|e):)[^\s#]+(?=(\b|$))/i,
+    lookbehind: true,
+    alias: "string",
+  },
   keyword: {
     pattern: new RegExp(`(^|\\b)(${keywordRegex})(?=(${operators}))`, 'i'),
   },
@@ -107,14 +130,22 @@ export const scryfallExtended: Grammar = {
   },
 }
 
+const comment: Grammar = {
+  url: {
+    pattern: /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/,
+    alias: ['comment'],
+  }
+}
+
 export const scryfallExtendedMulti: Grammar = {
   comment: {
     pattern: /(\n|^)\s*#.*(?=\n|$)/,
+    inside: comment,
     // greedy: true,
   },
   extension: {
     // pattern: /(\n|^)\s*#.*(?=\n|$)/,
-    pattern: /@(include|i|defaultMode|dm|defaultWeight|dw|alias|a):\w+/
+    pattern: /@(include|i|defaultMode|dm|defaultWeight|dw|alias|a):\w+/,
   },
   venn: {
     pattern: /@(venn|v)/,
@@ -136,14 +167,75 @@ export const scryfallExtendedMulti: Grammar = {
 }
 
 export const linkWrap = (env: Environment) => {
-  if (/(^|(local-))keyword/.test(env.type)) {
-    env.tag = 'a'
-
-    env.attributes.href = syntaxDocs[env.content]
-
-    env.attributes.target = '_blank'
+  switch (env.type) {
+    case "extension":
+    case "use":
+    case "venn": {
+      const filter = env.content.match(/^@(\w+):?.*$/)[1];
+      const href = extensionDocs[filter];
+      env.tag = 'a';
+      env.attributes.href = href;
+      if (!href.startsWith("/")) {
+        env.attributes.target = '_blank'
+        env.attributes.rel = 'noreferrer noopener'
+      }
+      break;
+    }
+    case "keyword": {
+      const href = syntaxDocs[env.content]
+      env.tag = 'a'
+      env.attributes.href = href
+      if (!href.startsWith("/")) {
+        env.attributes.target = '_blank'
+        env.attributes.rel = 'noreferrer noopener'
+      }
+      break;
+    }
+    case "cubeString":
+      env.tag = 'a'
+      env.attributes.href = `/data/cube/${env.content}`
+      break;
+    case "setString":
+      env.tag = 'a'
+      env.attributes.href = `https://scryfall.com/search?q=set:"${env.content}"&unique=cards&as=grid&order=set`
+      env.attributes.target = '_blank'
+      env.attributes.rel = 'noreferrer noopener'
+      break;
+    case "quotedSet":
+      env.tag = 'a'
+      env.attributes.href = `https://scryfall.com/search?q=set:${env.content}&unique=cards&as=grid&order=set`
+      env.attributes.target = '_blank'
+      env.attributes.rel = 'noreferrer noopener'
+      break;
+    case "operator":
+      if (Object.keys(OPERATORS).includes(env.content)) return;
+      if (env.content.includes(")")) return;
+      if (env.content.includes("(")) return;
+      env.tag = 'a'
+      env.attributes.href = syntaxDocs[env.content]
+      env.attributes.target = '_blank'
+      env.attributes.rel = 'noreferrer noopener'
+      break;
+    case "url":
+      env.tag = 'a'
+      env.attributes.href = env.content
+      env.attributes.target = '_blank'
+      env.attributes.rel = 'noreferrer noopener'
+  }
+}
 
-    env.attributes.rel = 'noreferrer noopener'
+export const hookReactDOM = (router: RemixRouter) => (env: Environment) => {
+  if (!env.element) return;
+  const element: Element = env.element
+  const atags = element.getElementsByTagName("a");
+  for (let i = 0; i < atags.length; i++) {
+    const tag = atags.item(i);
+    if (tag.href.startsWith(window.location.toString())) {
+      tag.addEventListener("click", e => {
+        e.preventDefault()
+        router.navigate(tag.href.replace(window.location.toString(), "/"))
+      }, {capture:true})
+    }
   }
 }
 

src/index.tsx

@@ -4,6 +4,7 @@ import { App } from './app'
 import * as Scry from 'scryfall-sdk'
 import Prism from 'prismjs'
 import {
+  hookReactDOM,
   linkWrap,
   scryfall,
   scryfallExtended,
@@ -14,24 +15,27 @@ import './styles.css'
 import "./ui/data/dataView.css"
 import 'mana-font/css/mana.min.css'
 import { FlagContextProvider } from './ui/flags'
-import { BrowserRouter } from 'react-router-dom'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { loadTheme } from './ui/component/theme'
 
+const router = createBrowserRouter([
+  { path: "*", Component: App }
+])
+
 Prism.languages['scryfall'] = scryfall
 Prism.languages['scryfall-extended'] = scryfallExtended
 Prism.languages['scryfall-extended-multi'] = scryfallExtendedMulti
 
 Prism.hooks.add('wrap', linkWrap)
+Prism.hooks.add('complete', hookReactDOM(router))
 
 Scry.setTimeout(50)
 
 loadTheme();
 
 render(
   <FlagContextProvider>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <RouterProvider router={router} />
   </FlagContextProvider>,
   document.getElementById('app')
 )

src/prism-cogwork.css

@@ -31,7 +31,10 @@ textarea[class*='language-'] {
 /* Code blocks */
 pre[class*='language-'],
 textarea[class*='language-'] {
-  padding: 1em;
+  padding-top: var(--toolbar-height, 1em);
+  padding-right: 1em;
+  padding-left: 1em;
+  padding-bottom: 1em;
   margin: 0.5em 0;
   overflow: auto;
 }
@@ -153,8 +156,7 @@ textarea[class*='language-'] {
 }
 
 .token.operator,
-.token.entity,
-.token.url {
+.token.entity {
   color: #67cdcc;
 }