Refactor and clean

web/cm_plugins/README.md

@@ -1,3 +0,0 @@
-Many of these plugins have been forked and adapted from: https://codeberg.org/retronav/ixora
-
-Licene: Apache 2

web/cm_plugins/collab.ts

@@ -1,4 +1,4 @@
-import { Extension, WebsocketProvider, Y, yCollab } from "./deps.ts";
+import { Extension, WebsocketProvider, Y, yCollab } from "../deps.ts";
 
 const userColors = [
   { color: "#30bced", light: "#30bced33" },

web/cm_plugins/editor_paste.ts

@@ -1,7 +1,7 @@
-import { EditorView, ViewPlugin, ViewUpdate } from "./deps.ts";
+import { EditorView, ViewPlugin, ViewUpdate } from "../deps.ts";
-import { safeRun } from "../plugos/util.ts";
+import { safeRun } from "../../plugos/util.ts";
-import { maximumAttachmentSize } from "../common/types.ts";
+import { maximumAttachmentSize } from "../../common/types.ts";
-import { Editor } from "./editor.tsx";
+import { Editor } from "../editor.tsx";
 
 // We use turndown to convert HTML to Markdown
 import TurndownService from "https://cdn.skypack.dev/turndown@7.1.1";

web/cm_plugins/inline_image.ts

@@ -1,13 +1,13 @@
-import { syntaxTree } from "./deps.ts";
-import { Range } from "./deps.ts";
 import {
   Decoration,
   DecorationSet,
   EditorView,
+  Range,
+  syntaxTree,
   ViewPlugin,
   ViewUpdate,
   WidgetType,
-} from "./deps.ts";
+} from "../deps.ts";
 
 class InlineImageWidget extends WidgetType {
   constructor(readonly url: string, readonly title: string) {

web/cm_plugins/line_wrapper.ts

@@ -1,13 +1,12 @@
-import { syntaxTree } from "../common/deps.ts";
 import {
   Decoration,
   DecorationSet,
   EditorView,
+  Range,
+  syntaxTree,
   ViewPlugin,
   ViewUpdate,
-} from "../common/deps.ts";
+} from "../deps.ts";
-
-import { Range } from "./deps.ts";
 
 interface WrapElement {
   selector: string;

web/cm_plugins/smart_quotes.ts

@@ -1,5 +1,4 @@
-import { KeyBinding } from "./deps.ts";
+import { KeyBinding, syntaxTree } from "../deps.ts";
-import { syntaxTree } from "../common/deps.ts";
 
 const straightQuoteContexts = [
   "CommentBlock",

web/components/top_bar.tsx

@@ -28,10 +28,7 @@ export function TopBar({
   pageName,
   unsavedChanges,
   isLoading,
-  editMode,
   notifications,
-  onClick,
-  onBlur,
   onRename,
   actionButtons,
   lhs,
@@ -39,11 +36,8 @@ export function TopBar({
 }: {
   pageName?: string;
   unsavedChanges: boolean;
-  editMode: boolean;
   isLoading: boolean;
   notifications: Notification[];
-  onClick: () => void;
-  onBlur: () => void;
   onRename: (newName: string) => void;
   actionButtons: ActionButton[];
   lhs?: ComponentChildren;
@@ -51,6 +45,7 @@ export function TopBar({
 }) {
   const [theme, setTheme] = useState<string>(localStorage.theme ?? "light");
   const inputRef = useRef<HTMLInputElement>(null);
+  const [editMode, setEditMode] = useState<boolean>(false);
   const isMac = isMacLike();
 
   useEffect(() => {
@@ -65,9 +60,23 @@ export function TopBar({
   }, [editMode]);
 
   return (
-    <div id="sb-top" onClick={onClick}>
+    <div id="sb-top">
       {lhs}
-      <div className="main">
+      <div
+        className="main"
+        onClick={(e) => {
+          if (!editMode) {
+            setEditMode(true);
+
+            setTimeout(() => {
+              if (inputRef.current) {
+                console.log("Going to dispatch click event again");
+                inputRef.current!.dispatchEvent(e);
+              }
+            }, 100);
+          }
+        }}
+      >
         <div className="inner">
           <span
             className={`sb-current-page ${
@@ -85,7 +94,9 @@ export function TopBar({
                   ref={inputRef}
                   value={pageName}
                   className="sb-edit-page-name"
-                  onBlur={onBlur}
+                  onBlur={() => {
+                    setEditMode(false);
+                  }}
                   onKeyDown={(e) => {
                     console.log("Key press", e);
                     e.stopPropagation();
@@ -93,11 +104,12 @@ export function TopBar({
                       e.preventDefault();
                       const newName = (e.target as any).value;
                       onRename(newName);
+                      setEditMode(false);
                     }
                   }}
                 />
               )
-              : prettyName(pageName)}
+              : pageName}
           </span>
           {notifications.length > 0 && (
             <div className="sb-notifications">

web/editor.tsx

@@ -1,3 +1,4 @@
+// Third party web dependencies
 import {
   preactRender,
   useEffect,
@@ -5,6 +6,7 @@ import {
   yUndoManagerKeymap,
 } from "./deps.ts";
 
+// Iconography
 import {
   faFolderTree,
   faHome,
@@ -13,6 +15,7 @@ import {
   faSun,
 } from "https://esm.sh/@fortawesome/free-solid-svg-icons@6.2.0";
 
+// Third-party dependencies
 import {
   autocompletion,
   closeBrackets,
@@ -45,37 +48,29 @@ import {
   ViewUpdate,
   yamlLanguage,
 } from "../common/deps.ts";
-import { SilverBulletHooks } from "../common/manifest.ts";
-// import { markdown } from "../common/_markdown/index.ts";
-import { markdown } from "../common/deps.ts";
 
+import { SilverBulletHooks } from "../common/manifest.ts";
+import { markdown } from "../common/deps.ts";
 import { loadMarkdownExtensions, MDExt } from "../common/markdown_ext.ts";
 import buildMarkdown from "../common/parser.ts";
 import { Space } from "../common/spaces/space.ts";
 import { markdownSyscalls } from "../common/syscalls/markdown.ts";
 import { FilterOption, PageMeta } from "../common/types.ts";
 import { isMacLike, safeRun, throttle } from "../common/util.ts";
+
+import { PathPageNavigator } from "./navigator.ts";
+import reducer from "./reducer.ts";
+
+// PlugOS Dependencies
 import { createSandbox } from "../plugos/environments/webworker_sandbox.ts";
 import { EventHook } from "../plugos/hooks/event.ts";
 import { eventSyscalls } from "../plugos/syscalls/event.ts";
 import sandboxSyscalls from "../plugos/syscalls/sandbox.ts";
 import { System } from "../plugos/system.ts";
-
-import { AppEvent, ClickEvent } from "../plug-api/app_event.ts";
-import { CommandPalette } from "./components/command_palette.tsx";
-import { FilterList } from "./components/filter.tsx";
-import { PageNavigator } from "./components/page_navigator.tsx";
-import { Panel } from "./components/panel.tsx";
-import { TopBar } from "./components/top_bar.tsx";
-import { attachmentExtension, pasteLinkExtension } from "./editor_paste.ts";
 import { CommandHook } from "./hooks/command.ts";
 import { SlashCommandHook } from "./hooks/slash_command.ts";
-import { inlineImagesPlugin } from "./inline_image.ts";
+
-import { lineWrapper } from "./line_wrapper.ts";
+// Syscalls
-import { PathPageNavigator } from "./navigator.ts";
-import reducer from "./reducer.ts";
-import { smartQuoteKeymap } from "./smart_quotes.ts";
-import customMarkdownStyle from "./style.ts";
 import { clientStoreSyscalls } from "./syscalls/clientStore.ts";
 import { editorSyscalls } from "./syscalls/editor.ts";
 import { fulltextSyscalls } from "./syscalls/fulltext.ts";
@@ -83,12 +78,33 @@ import { indexerSyscalls } from "./syscalls/index.ts";
 import { spaceSyscalls } from "./syscalls/space.ts";
 import { storeSyscalls } from "./syscalls/store.ts";
 import { systemSyscalls } from "./syscalls/system.ts";
-import { Action, AppViewState, initialViewState } from "./types.ts";
 import assetSyscalls from "../plugos/syscalls/asset.ts";
-import { CollabState } from "./collab.ts";
-import { collabSyscalls } from "./syscalls/collab.ts";
 
+// State and state transitions
+import { Action, AppViewState, initialViewState } from "./types.ts";
+import type { AppEvent, ClickEvent } from "../plug-api/app_event.ts";
+
+// UI Components
+import { CommandPalette } from "./components/command_palette.tsx";
+import { FilterList } from "./components/filter.tsx";
+import { PageNavigator } from "./components/page_navigator.tsx";
+import { Panel } from "./components/panel.tsx";
+import { TopBar } from "./components/top_bar.tsx";
+
+// CodeMirror plugins
+import {
+  attachmentExtension,
+  pasteLinkExtension,
+} from "./cm_plugins/editor_paste.ts";
+import { inlineImagesPlugin } from "./cm_plugins/inline_image.ts";
+import { lineWrapper } from "./cm_plugins/line_wrapper.ts";
+import { smartQuoteKeymap } from "./cm_plugins/smart_quotes.ts";
 import { cleanModePlugs } from "./cm_plugins/clean.ts";
+import customMarkdownStyle from "./style.ts";
+
+// Real-time collaboration
+import { CollabState } from "./cm_plugins/collab.ts";
+import { collabSyscalls } from "./syscalls/collab.ts";
 
 class PageState {
   constructor(
@@ -831,20 +847,12 @@ export class Editor {
           notifications={viewState.notifications}
           unsavedChanges={viewState.unsavedChanges}
           isLoading={viewState.isLoading}
-          editMode={viewState.editingPageName}
-          onClick={() => {
-            dispatch({ type: "edit-page-name" });
-          }}
-          onBlur={() => {
-            dispatch({ type: "stop-edit-page-name" });
-          }}
           onRename={(newName) => {
             console.log("Now renaming page to...", newName);
             editor.system.loadedPlugs.get("core")!.invoke(
               "renamePage",
               [newName],
             ).then(() => {
-              dispatch({ type: "stop-edit-page-name" });
               editor.focus();
             }).catch(console.error);
           }}

web/reducer.ts

@@ -36,16 +36,6 @@ export default function reducer(
         ...state,
         unsavedChanges: false,
       };
-    case "edit-page-name":
-      return {
-        ...state,
-        editingPageName: true,
-      };
-    case "stop-edit-page-name":
-      return {
-        ...state,
-        editingPageName: false,
-      };
     case "start-navigate":
       return {
         ...state,

web/types.ts

@@ -72,8 +72,6 @@ export type Action =
   | { type: "page-loading"; name: string }
   | { type: "pages-listed"; pages: Set<PageMeta> }
   | { type: "page-changed" }
-  | { type: "edit-page-name" }
-  | { type: "stop-edit-page-name" }
   | { type: "page-saved" }
   | { type: "start-navigate" }
   | { type: "stop-navigate" }