neil/silverbullet
1
0
Fork 0
Code

Prep for mattermost plugin

Browse Source
This commit is contained in:
Zef Hemel 2022-07-22 13:44:28 +02:00
parent 57db2df496
commit 65234e17dd
12 changed files with 71 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mattermost-plugin/server/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
coverage.txt
dist

17
mattermost-plugin/webapp/src/styles.scss Normal file
View File

@ -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;
}

2
packages/web/boot.ts
View File

@ -49,7 +49,7 @@ safeRun(async () => {
// localStorage.setItem("lastRemoteSync", "" + syncer.primaryLastSync); // localStorage.setItem("lastRemoteSync", "" + syncer.primaryLastSync);
// console.log("Done!"); // console.log("Done!");
// }; // };
let editor = new Editor(serverSpace, document.getElementById("root")!); let editor = new Editor(serverSpace, document.getElementById("sb-root")!, "");
await editor.init(); await editor.init();
// @ts-ignore // @ts-ignore
window.editor = editor; window.editor = editor;

2
packages/web/components/status_bar.tsx
View File

@ -10,7 +10,7 @@ export function StatusBar({ editorView }: { editorView?: EditorView }) {
readingTime = util.readingTime(wordCount); readingTime = util.readingTime(wordCount);
} }
return ( return (
<div id="status-bar"> <div id="sb-status-bar">
<div className="inner"> <div className="inner">
{wordCount} words | {readingTime} min {wordCount} words | {readingTime} min
</div> </div>

2
packages/web/components/top_bar.tsx
View File

@ -29,7 +29,7 @@ export function TopBar({
rhs?: React.ReactNode; rhs?: React.ReactNode;
}) { }) {
return ( return (
<div id="top" onClick={onClick}> <div id="sb-top" onClick={onClick}>
{lhs} {lhs}
<div className="main"> <div className="main">
<div className="inner"> <div className="inner">

18
packages/web/editor.tsx
View File

@ -114,9 +114,11 @@ export class Editor {
}, 1000); }, 1000);
private system = new System<SilverBulletHooks>("client"); private system = new System<SilverBulletHooks>("client");
private mdExtensions: MDExt[] = []; private mdExtensions: MDExt[] = [];
urlPrefix: string;
constructor(space: Space, parent: Element) { constructor(space: Space, parent: Element, urlPrefix: string) {
this.space = space; this.space = space;
this.urlPrefix = urlPrefix;
this.viewState = initialViewState; this.viewState = initialViewState;
this.viewDispatch = () => {}; this.viewDispatch = () => {};
@ -143,9 +145,9 @@ export class Editor {
this.render(parent); this.render(parent);
this.editorView = new EditorView({ this.editorView = new EditorView({
state: this.createEditorState("", ""), state: this.createEditorState("", ""),
parent: document.getElementById("editor")!, parent: document.getElementById("sb-editor")!,
}); });
this.pageNavigator = new PathPageNavigator(); this.pageNavigator = new PathPageNavigator(urlPrefix);
this.system.registerSyscalls( 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({ this.system.on({
plugLoaded: (plug) => { plugLoaded: (plug) => {
@ -721,7 +725,7 @@ export class Editor {
) )
} }
/> />
<div id="main"> <div id="sb-main">
{!!viewState.showLHS && ( {!!viewState.showLHS && (
<Panel <Panel
html={viewState.lhsHTML} html={viewState.lhsHTML}
@ -730,7 +734,7 @@ export class Editor {
editor={editor} editor={editor}
/> />
)} )}
<div id="editor" /> <div id="sb-editor" />
{!!viewState.showRHS && ( {!!viewState.showRHS && (
<Panel <Panel
html={viewState.rhsHTML} html={viewState.rhsHTML}
@ -741,7 +745,7 @@ export class Editor {
)} )}
</div> </div>
{!!viewState.showBHS && ( {!!viewState.showBHS && (
<div id="bhs"> <div className="bhs">
<Panel <Panel
html={viewState.bhsHTML} html={viewState.bhsHTML}
script={viewState.bhsScript} script={viewState.bhsScript}

12
packages/web/index.html
View File

@ -3,6 +3,16 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Silver Bullet</title> <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" /> <link rel="stylesheet" href="styles/main.scss" />
<script type="module" src="boot.ts"></script> <script type="module" src="boot.ts"></script>
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
@ -11,6 +21,6 @@
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="sb-root"></div>
</body> </body>
</html> </html>

14
packages/web/navigator.ts
View File

@ -11,8 +11,14 @@ function decodePageUrl(url: string): string {
export class PathPageNavigator { export class PathPageNavigator {
navigationResolve?: () => void; navigationResolve?: () => void;
constructor(readonly root: string = "") {}
async navigate(page: string, pos?: number) { 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( window.dispatchEvent(
new PopStateEvent("popstate", { new PopStateEvent("popstate", {
state: { page, pos }, state: { page, pos },
@ -47,7 +53,9 @@ export class PathPageNavigator {
} }
decodeURI(): [string, number] { decodeURI(): [string, number] {
let parts = decodeURI(location.pathname).substring(1).split("@"); let parts = decodeURI(
location.pathname.substring(this.root.length + 1)
).split("@");
let page = let page =
parts.length > 1 ? parts.slice(0, parts.length - 1).join("@") : parts[0]; parts.length > 1 ? parts.slice(0, parts.length - 1).join("@") : parts[0];
let pos = parts.length > 1 ? parts[parts.length - 1] : "0"; let pos = parts.length > 1 ? parts[parts.length - 1] : "0";
@ -63,7 +71,7 @@ export class PathPageNavigator {
} }
getCurrentPos(): number { getCurrentPos(): number {
console.log("Pos", this.decodeURI()[1]); // console.log("Pos", this.decodeURI()[1]);
return this.decodeURI()[1]; return this.decodeURI()[1];
} }
} }

2
packages/web/styles/constants.scss
View File

@ -1,3 +1,5 @@
$max-editor-width: 800px; $max-editor-width: 800px;
$top-bar-height: 55px; $top-bar-height: 55px;
$bottom-bar-height: 30px; $bottom-bar-height: 30px;
$editor-font: "iA-Mono", "Menlo";
$ui-font: "Arial";

2
packages/web/styles/editor.scss
View File

@ -10,7 +10,7 @@
padding: 0 20px; padding: 0 20px;
.cm-content { .cm-content {
font-family: var(--editor-font); font-family: $editor-font;
margin: auto; margin: auto;
max-width: $max-editor-width; max-width: $max-editor-width;
} }

4
packages/web/styles/filter_box.scss
View File

@ -1,6 +1,8 @@
@import "constants";
.filter-box { .filter-box {
position: absolute; position: absolute;
font-family: var(--ui-font); font-family: $ui-font;
margin: auto; margin: auto;
max-width: 500px; max-width: 500px;
height: 600px; height: 600px;

30
packages/web/styles/main.scss
View File

@ -30,32 +30,20 @@
font-style: italic; font-style: italic;
} }
:root { #sb-root {
--ident: 18px; --ident: 18px;
/* --editor-font: "Avenir"; */
--editor-font: "iA-Mono", "Menlo";
--ui-font: "Arial";
--top-bar-bg: rgb(41, 41, 41); --top-bar-bg: rgb(41, 41, 41);
--highlight-color: #464cfc; --highlight-color: #464cfc;
} }
html, #sb-root {
body {
margin: 0;
height: 100%;
padding: 0;
width: 100%;
overflow: hidden;
}
#root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#top { #sb-top {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
z-index: 20; z-index: 20;
@ -101,9 +89,10 @@ body {
} }
.current-page { .current-page {
font-family: var(--ui-font); font-family: $ui-font;
font-weight: bold; font-weight: bold;
flex: 1; flex: 1;
font-size: 28px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
@ -127,6 +116,7 @@ body {
border: 1px solid #7897d0; border: 1px solid #7897d0;
border-radius: 3px; border-radius: 3px;
margin: 3px; margin: 3px;
font-size: 15px;
padding: 5px; padding: 5px;
background-color: #e6e6e6; background-color: #e6e6e6;
} }
@ -138,7 +128,7 @@ body {
} }
} }
#main { #sb-main {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-grow: 1; flex-grow: 1;
@ -158,13 +148,13 @@ body {
} }
} }
#editor { #sb-editor {
overflow-y: scroll; overflow-y: scroll;
flex: 2; flex: 2;
height: 100%; height: 100%;
} }
#bhs { .bhs {
height: 300px; height: 300px;
width: 100%; width: 100%;
border-top: rgb(193, 193, 193) 1px solid; border-top: rgb(193, 193, 193) 1px solid;
@ -182,7 +172,7 @@ body {
} }
} }
#status-bar { #sb-status-bar {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
padding: 0 10px; padding: 0 10px;