Prep for mattermost plugin

2022-07-22 13:44:28 +02:00 · 2022-07-22 13:44:28 +02:00 · 65234e17dd
commit 65234e17dd
parent 57db2df496
12 changed files with 71 additions and 36 deletions
--- a/mattermost-plugin/server/.gitignore
+++ b/mattermost-plugin/server/.gitignore
@ -0,0 +1,2 @@
+coverage.txt
+dist
--- a/mattermost-plugin/webapp/src/styles.scss
+++ b/mattermost-plugin/webapp/src/styles.scss
@ -0,0 +1,17 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-family: revert;
+  font-weight: revert;
+  line-height: revert;
+  color: revert;
+}
--- a/packages/web/boot.ts
+++ b/packages/web/boot.ts
@ -49,7 +49,7 @@ safeRun(async () => {
  //   localStorage.setItem("lastRemoteSync", "" + syncer.primaryLastSync);
  //   console.log("Done!");
  // };
-  let editor = new Editor(serverSpace, document.getElementById("root")!);
+  let editor = new Editor(serverSpace, document.getElementById("sb-root")!, "");
  await editor.init();
  // @ts-ignore
  window.editor = editor;
--- a/packages/web/components/status_bar.tsx
+++ b/packages/web/components/status_bar.tsx
@ -10,7 +10,7 @@ export function StatusBar({ editorView }: { editorView?: EditorView }) {
    readingTime = util.readingTime(wordCount);
  }
  return (
-    <div id="status-bar">
+    <div id="sb-status-bar">
      <div className="inner">
        {wordCount} words | {readingTime} min
      </div>
--- a/packages/web/components/top_bar.tsx
+++ b/packages/web/components/top_bar.tsx
@ -29,7 +29,7 @@ export function TopBar({
  rhs?: React.ReactNode;
 }) {
  return (
-    <div id="top" onClick={onClick}>
+    <div id="sb-top" onClick={onClick}>
      {lhs}
      <div className="main">
        <div className="inner">
--- a/packages/web/editor.tsx
+++ b/packages/web/editor.tsx
@ -114,9 +114,11 @@ export class Editor {
  }, 1000);
  private system = new System<SilverBulletHooks>("client");
  private mdExtensions: MDExt[] = [];
+  urlPrefix: string;

-  constructor(space: Space, parent: Element) {
+  constructor(space: Space, parent: Element, urlPrefix: string) {
    this.space = space;
+    this.urlPrefix = urlPrefix;
    this.viewState = initialViewState;
    this.viewDispatch = () => {};

@ -143,9 +145,9 @@ export class Editor {
    this.render(parent);
    this.editorView = new EditorView({
      state: this.createEditorState("", ""),
-      parent: document.getElementById("editor")!,
+      parent: document.getElementById("sb-editor")!,
    });
-    this.pageNavigator = new PathPageNavigator();
+    this.pageNavigator = new PathPageNavigator(urlPrefix);

    this.system.registerSyscalls(
      [],
@ -209,7 +211,9 @@ export class Editor {
      }
    });

-    let globalModules: any = await (await fetch("/global.plug.json")).json();
+    let globalModules: any = await (
+      await fetch(`${this.urlPrefix}/global.plug.json`)
+    ).json();

    this.system.on({
      plugLoaded: (plug) => {
@ -721,7 +725,7 @@ export class Editor {
            )
          }
        />
-        <div id="main">
+        <div id="sb-main">
          {!!viewState.showLHS && (
            <Panel
              html={viewState.lhsHTML}
@ -730,7 +734,7 @@ export class Editor {
              editor={editor}
            />
          )}
-          <div id="editor" />
+          <div id="sb-editor" />
          {!!viewState.showRHS && (
            <Panel
              html={viewState.rhsHTML}
@ -741,7 +745,7 @@ export class Editor {
          )}
        </div>
        {!!viewState.showBHS && (
-          <div id="bhs">
+          <div className="bhs">
            <Panel
              html={viewState.bhsHTML}
              script={viewState.bhsScript}
--- a/packages/web/index.html
+++ b/packages/web/index.html
@ -3,6 +3,16 @@
  <head>
    <meta charset="utf-8" />
    <title>Silver Bullet</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+        padding: 0;
+        width: 100%;
+        overflow: hidden;
+      }
+    </style>
    <link rel="stylesheet" href="styles/main.scss" />
    <script type="module" src="boot.ts"></script>
    <link rel="manifest" href="manifest.json" />
@ -11,6 +21,6 @@
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
-    <div id="root"></div>
+    <div id="sb-root"></div>
  </body>
 </html>
--- a/packages/web/navigator.ts
+++ b/packages/web/navigator.ts
@ -11,8 +11,14 @@ function decodePageUrl(url: string): string {
 export class PathPageNavigator {
  navigationResolve?: () => void;

+  constructor(readonly root: string = "") {}
+
  async navigate(page: string, pos?: number) {
-    window.history.pushState({ page, pos }, page, `/${encodePageUrl(page)}`);
+    window.history.pushState(
+      { page, pos },
+      page,
+      `${this.root}/${encodePageUrl(page)}`
+    );
    window.dispatchEvent(
      new PopStateEvent("popstate", {
        state: { page, pos },
@ -47,7 +53,9 @@ export class PathPageNavigator {
  }

  decodeURI(): [string, number] {
-    let parts = decodeURI(location.pathname).substring(1).split("@");
+    let parts = decodeURI(
+      location.pathname.substring(this.root.length + 1)
+    ).split("@");
    let page =
      parts.length > 1 ? parts.slice(0, parts.length - 1).join("@") : parts[0];
    let pos = parts.length > 1 ? parts[parts.length - 1] : "0";
@ -63,7 +71,7 @@ export class PathPageNavigator {
  }

  getCurrentPos(): number {
-    console.log("Pos", this.decodeURI()[1]);
+    // console.log("Pos", this.decodeURI()[1]);
    return this.decodeURI()[1];
  }
 }
--- a/packages/web/styles/constants.scss
+++ b/packages/web/styles/constants.scss
@ -1,3 +1,5 @@
 $max-editor-width: 800px;
 $top-bar-height: 55px;
 $bottom-bar-height: 30px;
+$editor-font: "iA-Mono", "Menlo";
+$ui-font: "Arial";
--- a/packages/web/styles/editor.scss
+++ b/packages/web/styles/editor.scss
@ -10,7 +10,7 @@
  padding: 0 20px;

  .cm-content {
-    font-family: var(--editor-font);
+    font-family: $editor-font;
    margin: auto;
    max-width: $max-editor-width;
  }
--- a/packages/web/styles/filter_box.scss
+++ b/packages/web/styles/filter_box.scss
@ -1,6 +1,8 @@
+@import "constants";
+
 .filter-box {
  position: absolute;
-  font-family: var(--ui-font);
+  font-family: $ui-font;
  margin: auto;
  max-width: 500px;
  height: 600px;
--- a/packages/web/styles/main.scss
+++ b/packages/web/styles/main.scss
@ -30,32 +30,20 @@
  font-style: italic;
 }

-:root {
+#sb-root {
  --ident: 18px;
-  /* --editor-font: "Avenir"; */
-  --editor-font: "iA-Mono", "Menlo";
-  --ui-font: "Arial";
  --top-bar-bg: rgb(41, 41, 41);
  --highlight-color: #464cfc;
 }

-html,
-body {
-  margin: 0;
-  height: 100%;
-  padding: 0;
-  width: 100%;
-  overflow: hidden;
-}
-
-#root {
+#sb-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
 }

-#top {
+#sb-top {
  display: flex;
  flex-direction: row;
  z-index: 20;
@ -101,9 +89,10 @@ body {
      }

      .current-page {
-        font-family: var(--ui-font);
+        font-family: $ui-font;
        font-weight: bold;
        flex: 1;
+        font-size: 28px;

        overflow: hidden;
        white-space: nowrap;
@ -127,6 +116,7 @@ body {
        border: 1px solid #7897d0;
        border-radius: 3px;
        margin: 3px;
+        font-size: 15px;
        padding: 5px;
        background-color: #e6e6e6;
      }
@ -138,7 +128,7 @@ body {
  }
 }

-#main {
+#sb-main {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
@ -158,13 +148,13 @@ body {
  }
 }

-#editor {
+#sb-editor {
  overflow-y: scroll;
  flex: 2;
  height: 100%;
 }

-#bhs {
+.bhs {
  height: 300px;
  width: 100%;
  border-top: rgb(193, 193, 193) 1px solid;
@ -182,7 +172,7 @@ body {
  }
 }

-#status-bar {
+#sb-status-bar {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;