change the way text suggestions are rendered + option to disable syntactic sugar

src/App.tsx

@@ -48,6 +48,8 @@ export function App() {
   // load from localStorage
   const [appState, setAppState] = useState(loadFromLocalStorage());
 
+  const [syntacticSugar, setSyntacticSugar] = useState(true);
+
   useEffect(() => {
     // persist accross reloads
     localStorage["appState"] = JSON.stringify(appState);
@@ -146,15 +148,21 @@ export function App() {
         <button className="factoryReset" onClick={factoryReset}>
           FACTORY RESET
         </button>
+        <label>
+        <input type="checkbox"
+          checked={syntacticSugar}
+          onChange={e => setSyntacticSugar(e.target.checked)}/>
+        syntactic sugar
+        </label>
       </header>
 
       <main onKeyDown={onKeyDown}>
-        <CommandContext value={{undo: onUndo, redo: onRedo, doHighlight}}>
+        <CommandContext value={{undo: onUndo, redo: onRedo, doHighlight, syntacticSugar}}>
           <Editor
             state={appState.history.at(-1)!}
             setState={pushHistory}
             onCancel={() => {}}
-            suggestionPriority={() => 0}
+            suggestionPriority={() => 1}
           />
         </CommandContext>