├── .gitignore
├── README.md
├── package.json
├── public
    ├── 404.html
    ├── CNAME
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
├── server
    ├── global.d.ts
    ├── publisher.tsx
    ├── replicator.ts
    └── tsconfig.json
├── src
    ├── App.css
    ├── App.test.tsx
    ├── App.tsx
    ├── ExpandingTextArea.tsx
    ├── PageText.tsx
    ├── Replicate.tsx
    ├── db.ts
    ├── export.ts
    ├── global.d.ts
    ├── index.css
    ├── index.tsx
    ├── react-app-env.d.ts
    ├── requestPersistentStorage.ts
    ├── serviceWorker.ts
    ├── setupTests.ts
    ├── textarea-op.ts
    ├── useHistory.ts
    └── worker
    │   ├── index.ts
    │   └── tsconfig.json
├── tsconfig.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | /data
26 | /dist
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | > NOTE: this readme is currently _aspirational_, lots of this stuff doesn't
 2 | > work yet, but I'd like it to!
 3 | 
 4 | [[Autowiki]] is a tool for creating networked documents. Autowiki is a [local-first](https://www.inkandswitch.com/local-first.html) app: you own all the data you put into it, and your data never leaves your own machine unless you want it to.
 5 | 
 6 | ### Try it out
 7 | 
 8 | Visit [$WEBSITE](https://web.site) to start editing right away in your browser. To back up your data, run a [replication peer](#replicationpeer). Replication peers can optionally publish a read-only version of your wiki.
 9 | 
10 | ## Data Model
11 | 
12 | Autowiki thinks of a wiki as a single document with many interlinked pages. All your data is stored locally, and optionally [replicated](#replicationpeer) to one or more remote sites. You can connect multiple editors to a replication peer, and edits will be synchronized automatically when they connect to the peer. Autowiki uses [automerge](https://github.com/automerge/automerge) under the hood to resolve edit conflicts automatically.
13 | 
14 | ## Replication Peer
15 | 
16 | Browsers are not designed for resilient storage, so Autowiki provides the ability to live-backup your data as you type. Replication peers also allow you to edit the same wiki from multiple documents, and keep all your changes synchronized.
17 | 
18 | To run a replication peer, you can use the `@autowiki/replication-peer` npm package:
19 | 
20 | ```
21 | $ npx @autowiki/replication-peer
22 | Listening on 0.0.0.0:3030...
23 | Secret: 202a20cd-059c-4ef9-a7ce-3f2aecef17f8
24 | ```
25 | 
26 | To connect the Autowiki editor to the replication peer, enter its publicly-reachable address along with the secret. For instance, if your server is hosted at `my.server.net`, and the replication peer is listening on port 3030, enter `202a20cd-059c-4ef9-a7ce-3f2aecef17f8@my.server.net:3030` as the replication peer address.
27 | 
28 | ### Publishing
29 | 
30 | Optionally, the replication peer can also publish a read-only copy of your wiki. To publish a wiki, pass the `--publish` option to `@autowiki/replication-peer`:
31 | 
32 | ```
33 | $ npx @autowiki/replication-peer --publish
34 | ```
35 | 
36 | The replication peer will publish the read-only version on the same port it listens for changes.
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "autowiki",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "homepage": "https://www.autowiki.app",
 6 |   "dependencies": {
 7 |     "@testing-library/jest-dom": "^4.2.4",
 8 |     "@testing-library/react": "^9.3.2",
 9 |     "@testing-library/user-event": "^7.1.2",
10 |     "automerge": "^1.0.1-preview.6",
11 |     "base64-arraybuffer": "^0.2.0",
12 |     "cors": "^2.8.5",
13 |     "debounce": "^1.2.0",
14 |     "express": "^4.17.1",
15 |     "express-ws": "^4.0.0",
16 |     "gh-pages": "^3.1.0",
17 |     "idb": "^7.0.0",
18 |     "node-localstorage": "^2.1.5",
19 |     "react": "^16.12.0",
20 |     "react-dom": "^16.12.0",
21 |     "react-scripts": "^5.0.0",
22 |     "reconnecting-websocket": "^4.4.0",
23 |     "rehype-raw": "^6.1.1",
24 |     "rehype-stringify": "^9.0.3",
25 |     "remark": "^14.0.2",
26 |     "remark-gfm": "^3.0.1",
27 |     "remark-highlight.js": "^7.0.1",
28 |     "remark-rehype": "^10.1.0",
29 |     "remark-truncate-links": "^1.0.3",
30 |     "remark-wiki-link": "^1.0.4",
31 |     "typescript": "4.4.4"
32 |   },
33 |   "scripts": {
34 |     "predeploy": "npm run build",
35 |     "deploy": "gh-pages -d build",
36 |     "replicator": "ts-node server/replicator.ts",
37 |     "start": "react-scripts start",
38 |     "build": "react-scripts build",
39 |     "test": "react-scripts test",
40 |     "eject": "react-scripts eject"
41 |   },
42 |   "eslintConfig": {
43 |     "extends": "react-app"
44 |   },
45 |   "browserslist": {
46 |     "production": [
47 |       ">0.2%",
48 |       "not dead",
49 |       "not op_mini all"
50 |     ],
51 |     "development": [
52 |       "last 1 chrome version",
53 |       "last 1 firefox version",
54 |       "last 1 safari version"
55 |     ]
56 |   },
57 |   "devDependencies": {
58 |     "@types/cors": "^2.8.6",
59 |     "@types/debounce": "^1.2.0",
60 |     "@types/express": "^4.17.3",
61 |     "@types/express-ws": "^3.0.0",
62 |     "@types/jest": "^24.0.0",
63 |     "@types/node": "^17.0.0",
64 |     "@types/node-localstorage": "^1.3.0",
65 |     "@types/react": "^16.9.0",
66 |     "@types/react-dom": "^16.9.0",
67 |     "@types/uuid": "^8.3.4",
68 |     "@types/ws": "^8.2.2",
69 |     "ts-node": "^10.5.0"
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/public/404.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <script>
3 | const l = window.location
4 | l.replace(l.protocol + '//' + l.hostname + '/?' + l.pathname + l.hash)
5 | </script>
6 | 


--------------------------------------------------------------------------------
/public/CNAME:
--------------------------------------------------------------------------------
1 | www.autowiki.app
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nornagon/autowiki/9ddb19500d5a4a1c815e7c900d81746e4c1d46f0/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <script>
31 |       (function(l) {
32 |         if (l.search[1] === '/' ) {
33 |           window.history.replaceState(null, null, l.search.slice(1) + l.hash);
34 |         }
35 |       }(window.location))
36 |     </script>
37 |     <noscript>You need to enable JavaScript to run this app.</noscript>
38 |     <div id="root"></div>
39 |     <!--
40 |       This HTML file is a template.
41 |       If you open it directly in the browser, you will see an empty page.
42 | 
43 |       You can add webfonts, meta tags, or analytics to this file.
44 |       The build step will place the bundled scripts into the <body> tag.
45 | 
46 |       To begin the development, run `npm start` or `yarn start`.
47 |       To create a production bundle, use `npm run build` or `yarn build`.
48 |     -->
49 |   </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nornagon/autowiki/9ddb19500d5a4a1c815e7c900d81746e4c1d46f0/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nornagon/autowiki/9ddb19500d5a4a1c815e7c900d81746e4c1d46f0/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/server/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'uuid';
2 | declare module 'basic-auth';
3 | declare module 'y-websocket/bin/utils';
4 | 


--------------------------------------------------------------------------------
/server/publisher.tsx:
--------------------------------------------------------------------------------
 1 | import express from 'express'
 2 | // import Automerge from 'automerge'
 3 | // import ReactDOMServer from 'react-dom/server';
 4 | // import React from 'react';
 5 | // import PageText from '../src/PageText';
 6 | // import WebSocket from 'ws';
 7 | // import * as path from 'path';
 8 | // import * as fs from 'fs';
 9 | 
10 | // function StaticPage({title, text}: {title: string, text: string}) {
11 | //   return (
12 | //     <article className="Page">
13 | //       <h1>{title}</h1>
14 | //       <section className="text"><PageText text={text ?? ""} /></section>
15 | //     </article>
16 | //   )
17 | // }
18 | 
19 | // const app = express()
20 | // app.use(express.static(path.join(__dirname, '../../build')))
21 | // const peer = process.argv[2]
22 | 
23 | // const docSet = new Automerge.DocSet<Record<string, Automerge.Text>>()
24 | 
25 | // const ws = new WebSocket(peer + '/_changes')
26 | // ws.on('open', () => {
27 | //   const conn = new Automerge.Connection(docSet, (msg) => {
28 | //     ws.send(JSON.stringify(msg))
29 | //   })
30 | //   ws.on('message', (data) => {
31 | //     conn.receiveMsg(JSON.parse(data as string))
32 | //   })
33 | //   ws.on('close', (code, reason) => {
34 | //     console.log('close', code, reason)
35 | //   })
36 | // })
37 | 
38 | // app.get('/*', (req, res, next) => {
39 | //   const text = (docSet.getDoc('wiki')[req.params[0]] ?? '').toString()
40 | //   fs.readFile(path.join(__dirname, '../../build/index.html'), (err, data) => {
41 | //     if (err) return next(err)
42 | //     const body = `<div className="App">${ReactDOMServer.renderToStaticMarkup(StaticPage({ title: req.params[0], text }))}</div>`
43 | //     const page = data.toString('utf8').replace(/<noscript>.*/, body) + '</body></html>'
44 | //     res.end(page)
45 | //   })
46 | // })
47 | 
48 | // app.listen(3003)


--------------------------------------------------------------------------------
/server/replicator.ts:
--------------------------------------------------------------------------------
  1 | import express from 'express'
  2 | import cors from 'cors'
  3 | import * as WebSocket from 'ws'
  4 | import * as uuid from 'uuid';
  5 | import * as fs from 'fs/promises'
  6 | import * as path from 'path'
  7 | import * as fsSync from 'fs'
  8 | import * as crypto from 'crypto'
  9 | import {URL} from 'url'
 10 | import * as Automerge from 'automerge';
 11 | 
 12 | (async () => {
 13 | 
 14 | const secret: string = (() => {
 15 |   if (!fsSync.existsSync('./_secret')) {
 16 |     const secret: string = uuid.v4()
 17 |     fsSync.writeFileSync('./_secret', secret)
 18 |     return secret
 19 |   }
 20 |   return fsSync.readFileSync('./_secret', 'utf8')
 21 | })()
 22 | 
 23 | const app = express()
 24 | app.use(express.json())
 25 | app.use(cors() as any)
 26 | 
 27 | const persistenceDir = process.env.AUTOWIKI_PERSISTENCE_DIR ?? "./data-automerge"
 28 | const dataPath = path.join(persistenceDir, 'data')
 29 | 
 30 | if (!(await fs.stat(persistenceDir).catch(() => null))) {
 31 |   await fs.mkdir(persistenceDir)
 32 | }
 33 | const stat: fsSync.Stats | null = await fs.stat(dataPath).catch(() => null)
 34 | const fh = await fs.open(dataPath, stat ? 'r+': 'w+')
 35 | console.log('doc size', ((stat ? stat.size : 0) / 1024).toFixed(1) + ' K')
 36 | console.time('loading doc')
 37 | let doc = Automerge.init<any>()
 38 | do {
 39 |   const {buffer, bytesRead} = await fh.read({
 40 |     buffer: Buffer.alloc(4)
 41 |   })
 42 |   if (bytesRead < 4)
 43 |     break
 44 |   const len = buffer.readUInt32LE()
 45 |   {
 46 |     const {buffer, bytesRead} = await fh.read({
 47 |       buffer: Buffer.alloc(len)
 48 |     })
 49 |     if (bytesRead === len) {
 50 |       const [newDoc] = Automerge.applyChanges(doc, [buffer as Uint8Array as Automerge.BinaryChange])
 51 |       doc = newDoc
 52 |     } else {
 53 |       console.warn("Corrupted data store? Proceed with caution...")
 54 |       break
 55 |     }
 56 |   }
 57 | } while (true)
 58 | console.timeEnd('loading doc')
 59 | const writeStream = fh.createWriteStream()
 60 | 
 61 | const server = app.listen(process.env.PORT ?? 3030, () => {
 62 |   const {family, address, port} = server.address() as any;
 63 |   const addr = `${family === "IPv6" ? `[${address}]` : address}:${port}`;
 64 |   console.log(`Server listening on ${addr}`);
 65 |   console.log(`Peer key is ${secret}@${addr}`)
 66 | })
 67 | 
 68 | const wss = new WebSocket.Server({ noServer: true })
 69 | 
 70 | const secretBuf = Buffer.from(secret)
 71 | function isValidSecret(key: string): boolean {
 72 |   const keyBuf = Buffer.alloc(secret.length, key)
 73 |   return crypto.timingSafeEqual(secretBuf, keyBuf)
 74 | }
 75 | 
 76 | let peers = new Map<any, Automerge.SyncState>()
 77 | const updatePeers = () => {
 78 |   for (const [ws, syncState] of peers.entries()) {
 79 |     const [newSyncState, msg] = Automerge.generateSyncMessage(doc, syncState)
 80 |     peers.set(ws, newSyncState)
 81 |     if (msg) {
 82 |       ws.send(msg)
 83 |     } else {
 84 |       ws.send(new Uint8Array())
 85 |     }
 86 |   }
 87 | }
 88 | server.on('upgrade', (req, socket, head) => {
 89 |   const params = new URL('x:' + req.url).searchParams
 90 |   if (!params.has('key') || !isValidSecret(params.get("key")!)) {
 91 |     socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n')
 92 |     socket.destroy()
 93 |     return
 94 |   }
 95 |   wss.handleUpgrade(req, socket, head, (ws) => {
 96 |     peers.set(ws, Automerge.initSyncState())
 97 |     ws.addEventListener('close', () => { peers.delete(ws) })
 98 |     ws.addEventListener('error', () => { peers.delete(ws) }) // do i need both?
 99 |     ws.addEventListener('message', ({data}) => {
100 |       if ((data as any).byteLength === 0) return
101 |       const [newDoc, newSyncState] = Automerge.receiveSyncMessage(doc, peers.get(ws)!, data as Automerge.BinarySyncMessage)
102 |       const changes = Automerge.getChanges(doc, newDoc)
103 |       for (const change of changes) {
104 |         const lenBuf = Buffer.alloc(4)
105 |         lenBuf.writeUInt32LE(change.byteLength)
106 |         writeStream.write(lenBuf)
107 |         writeStream.write(change)
108 |       }
109 |       doc = newDoc
110 |       peers.set(ws, newSyncState)
111 |       updatePeers()
112 |     })
113 |   })
114 | })
115 | 
116 | })()
117 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es6",
 4 |     "lib": [
 5 |       "esnext"
 6 |     ],
 7 |     "allowJs": true,
 8 |     "skipLibCheck": true,
 9 |     "esModuleInterop": true,
10 |     "allowSyntheticDefaultImports": true,
11 |     "strict": true,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "module": "commonjs",
14 |     "moduleResolution": "node",
15 |     "resolveJsonModule": true,
16 |     "isolatedModules": true,
17 |     "outDir": "dist",
18 |     "jsx": "react"
19 |   },
20 |   "include": [
21 |     "server"
22 |   ]
23 | }
24 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | .Page {
  2 |   max-width: 800px;
  3 |   margin: 0 auto;
  4 |   line-height: 1.5em;
  5 | }
  6 | 
  7 | .Page mark {
  8 |   background: #fef09f;
  9 |   margin: -3px -2px;
 10 |   padding: 3px 2px;
 11 | }
 12 | 
 13 | .Page blockquote {
 14 |   margin-inline-start: 0;
 15 |   padding-inline-start: 1em;
 16 |   border-left: 4px solid lightgray;
 17 | }
 18 | 
 19 | .Page img {
 20 |   max-width: 100%;
 21 | }
 22 | 
 23 | .Page ul, .Page ol {
 24 |   padding-inline-start: 2em;
 25 | }
 26 | 
 27 | .Page li.task-list-item {
 28 |   list-style-type: none;
 29 |   margin-inline-start: -1.5em;
 30 | }
 31 | 
 32 | .Page li.task-list-item > ul, .Page li.task-list-item > ol {
 33 |   margin-inline-start: 1.5em;
 34 | }
 35 | 
 36 | .Page pre {
 37 |   white-space: pre-wrap;
 38 | }
 39 | 
 40 | .Page .para.selected {
 41 |   background-color: cornsilk;
 42 | }
 43 | 
 44 | .Page .para {
 45 |   position: relative;
 46 | }
 47 | 
 48 | .Page .para .id {
 49 |   position: absolute;
 50 |   left: -50px;
 51 |   font-family: monospace;
 52 |   opacity: 0.3;
 53 | }
 54 | .Page .para .id a:visited {
 55 |   color: #106ba3;
 56 | }
 57 | .Page .para .id a:target, .Page .para .id a.css-target /* work around https://github.com/whatwg/html/issues/639 */ {
 58 |   background-color: yellow;
 59 | }
 60 | 
 61 | .table {
 62 |   border-spacing: 0;
 63 |   border-collapse: collapse;
 64 | }
 65 | 
 66 | .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
 67 |   padding: 8px;
 68 |   vertical-align: top;
 69 |   border-top: 1px solid #ddd;
 70 | }
 71 | .table > thead > tr > th {
 72 |   vertical-align: bottom;
 73 |   border-bottom: 2px solid #ddd;
 74 |   box-sizing: border-box;
 75 |   padding: 2px 8px;
 76 | }
 77 | .table > thead:first-child > tr:first-child > th, .table > thead:first-child > tr:first-child > td {
 78 |   border-top: 0;
 79 | }
 80 | 
 81 | .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
 82 |   background-color: #f9f9f9;
 83 | }
 84 | 
 85 | .expandingArea {
 86 |   position: relative;
 87 |   background: transparent;
 88 | }
 89 | .expandingArea > textarea, .expandingArea > pre {
 90 |   background: transparent;
 91 |   font: inherit;
 92 |   white-space: pre-wrap;
 93 |   word-wrap: break-word;
 94 |   text-rendering: inherit;
 95 |   margin: 0;
 96 |   padding: 0;
 97 |   outline: 0;
 98 |   border: 0;
 99 | }
100 | .expandingArea > textarea {
101 |   box-sizing: border-box;
102 |   width: 100%;
103 |   height: 100px;
104 |   resize: none;
105 |   overflow: hidden;
106 |   position: absolute;
107 |   top: 0;
108 |   left: 0;
109 |   height: 100%;
110 | }
111 | .expandingArea > pre {
112 |   visibility: hidden;
113 | }
114 | 
115 | a:link {
116 |   text-decoration: none;
117 |   color: #106ba3;
118 | }
119 | a:link:hover {
120 |   text-decoration: underline;
121 | }
122 | a.wikilink:before {
123 |   content: '[[';
124 |   color: #a7b6c2;
125 | }
126 | a.wikilink:after {
127 |   content: ']]';
128 |   color: #a7b6c2;
129 | }
130 | a.wikilink:visited {
131 |   color: #106ba3;
132 | }
133 | 
134 | .ReplicationStateIndicator {
135 |   position: fixed;
136 |   top: 20px;
137 |   right: 20px;
138 |   display: flex;
139 |   justify-content: center;
140 |   align-items: center;
141 |   cursor: pointer;
142 | }
143 | 
144 | .ReplicationStateIndicator .bubble {
145 |   border-radius: 999px;
146 |   width: 10px;
147 |   height: 10px;
148 |   background-color: red;
149 | }
150 | .ReplicationStateIndicator.behind .bubble {
151 |   background-color: orange;
152 | }
153 | .ReplicationStateIndicator.synced .bubble {
154 |   background-color: green;
155 | }
156 | 
157 | .modal-backdrop {
158 |   position: fixed;
159 |   top: 0; left: 0; right: 0; bottom: 0;
160 |   background-color: rgba(0, 0, 0, 0.3);
161 |   display: flex;
162 |   justify-content: center;
163 | }
164 | 
165 | .Switcher {
166 |   position: absolute;
167 |   top: 20px;
168 |   width: 600px;
169 |   background: white;
170 | }
171 | 
172 | .Switcher input {
173 |   width: 100%;
174 |   font-size: inherit;
175 | }
176 | 


--------------------------------------------------------------------------------
/src/App.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   const { getByText } = render(<App />);
 7 |   const linkElement = getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState, useMemo, useRef, useCallback, useContext, KeyboardEventHandler, ChangeEvent, forwardRef, Ref } from 'react';
  2 | import './App.css';
  3 | import Automerge from 'automerge';
  4 | import { Op, opFromInput } from './textarea-op';
  5 | import * as uuid from 'uuid';
  6 | import { Replicate, ReplicationState } from './Replicate';
  7 | import PageText, { extractLinks } from './PageText';
  8 | import { exportFormatError } from './export';
  9 | import * as b64 from 'base64-arraybuffer';
 10 | import { ExpandingTextArea } from './ExpandingTextArea';
 11 | import { useHistory } from './useHistory';
 12 | import { requestPersistentStorage } from './requestPersistentStorage';
 13 | import { DB } from './db'
 14 | 
 15 | const sharedWorker = new SharedWorker(new URL('./worker', import.meta.url))
 16 | 
 17 | const db = new DB('autowiki')
 18 | 
 19 | const EXPORT_VERSION = 1
 20 | 
 21 | type Block = {
 22 |   text: Automerge.Text
 23 | }
 24 | 
 25 | type Page = {
 26 |   blocks: Automerge.List<Block>
 27 | }
 28 | 
 29 | type Blob = {
 30 |   data: string; // b64
 31 |   type: string;
 32 | }
 33 | 
 34 | type Wiki = {
 35 |   pages: Record<string, Page>;
 36 |   blobs: Record<string, Blob>;
 37 | }
 38 | 
 39 | type DocHook<T> = [Automerge.Doc<T>, (fn: Automerge.ChangeFn<T>) => void, (f: (newDoc: Automerge.Doc<T>) => Automerge.Doc<T>) => void]
 40 | 
 41 | const WikiDocument = React.createContext<DocHook<Wiki> | null>(null)
 42 | 
 43 | function useWiki(): DocHook<Wiki> {
 44 |   useEffect(() => { requestPersistentStorage() }, [])
 45 |   const doc = useContext(WikiDocument)
 46 |   return doc!
 47 | }
 48 | 
 49 | function usePage(title: string): [Automerge.FreezeObject<Page>, (fn: Automerge.ChangeFn<Page>) => void] {
 50 |   const [doc, change] = useWiki()
 51 |   const page = (doc.pages ? doc.pages[title] : null) ?? { blocks: [{ text: new Automerge.Text() }] }
 52 |   const changePage = (f: Automerge.ChangeFn<Page>) => {
 53 |     change(doc => {
 54 |       if (!doc.pages) doc.pages = {}
 55 |       if (!Object.prototype.hasOwnProperty.call(doc.pages, title)) {
 56 |         doc.pages[title] = { blocks: [{ text: new Automerge.Text() }] }
 57 |       }
 58 |       f(doc.pages[title])
 59 |     })
 60 |   }
 61 |   return [page, changePage]
 62 | }
 63 | 
 64 | 
 65 | function* allPages(wiki: Automerge.Doc<Wiki>): Generator<[string, Page], any, unknown> {
 66 |   for (const k of Object.keys(wiki?.pages ?? {})) {
 67 |     yield [k, wiki.pages[k]]
 68 |   }
 69 | }
 70 | 
 71 | // http://isthe.com/chongo/tech/comp/fnv/
 72 | // FNV1a:
 73 | // hash = offset_basis
 74 | // for each octet_of_data to be hashed
 75 | //   hash = hash xor octet_of_data
 76 | //   hash = hash * FNV_prime
 77 | // return hash
 78 | // 32 bit FNV_prime = 224 + 28 + 0x93 = 16777619
 79 | // 32 bit offset_basis = 2166136261
 80 | function fnvHash(bytes: Iterable<number>): number {
 81 |   const offset_basis = 2166136261
 82 |   const FNV_prime = 16777619
 83 |   let hash = offset_basis
 84 |   for (const byte of bytes) {
 85 |     hash = hash ^ byte
 86 |     hash = Math.imul(hash, FNV_prime)
 87 |   }
 88 |   return hash >>> 0
 89 | }
 90 | 
 91 | function mixedId(id: string) {
 92 |   const encoder = new TextEncoder()
 93 |   return id ? fnvHash(encoder.encode(id)) : 0
 94 | }
 95 | 
 96 | function findNearestParent(node: Node, fn: (n: Element) => boolean): Element | null {
 97 |   let e: Element | null = node instanceof Element ? node : node.parentElement
 98 |   while (e && !fn(e)) {
 99 |     e = e.parentElement
100 |   }
101 |   return e
102 | }
103 | 
104 | function expandText(text: string, lookup: (tag: string) => string | undefined, bannedTags: Set<string> = new Set()): string {
105 |   return text.replace(/\{\{([^}]+?)\}\}/g, (match, tag) => {
106 |     if (bannedTags.has(tag)) return match
107 |     const newBannedTags = new Set(bannedTags)
108 |     newBannedTags.add(tag)
109 |     const text = lookup(tag)
110 |     return text ? expandText(text, lookup, newBannedTags) : match
111 |   })
112 | }
113 | 
114 | const BlockEditor = forwardRef(({ block, changeBlock, onKeyDown, onOp }: {
115 |   block: Block;
116 |   changeBlock: (f: (b: Block) => void) => void;
117 |   onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
118 |   onOp?: (op: Op, event: ChangeEvent<HTMLTextAreaElement>) => boolean | undefined;
119 | }, ref: any) => {
120 |   const [, changeWiki] = useWiki()
121 |   return <ExpandingTextArea
122 |     ref={ref}
123 |     value={block.text.toString()}
124 |     autoFocus
125 |     onKeyDown={e => {
126 |       if (onKeyDown) {
127 |         onKeyDown(e)
128 |         if (e.defaultPrevented) return
129 |       }
130 |       const { currentTarget } = e
131 |       const { selectionStart, selectionEnd } = currentTarget
132 |       if (e.key === '[') {
133 |         changeBlock(b => {
134 |           b.text.insertAt!(selectionEnd, ']')
135 |           b.text.insertAt!(selectionStart, '[')
136 |         })
137 |         requestAnimationFrame(() => currentTarget.setSelectionRange(selectionStart + 1, selectionEnd + 1))
138 |         e.preventDefault()
139 |       } else if (e.key === ']' && selectionStart === selectionEnd && currentTarget.value[selectionStart] === ']') {
140 |         e.preventDefault()
141 |         currentTarget.setSelectionRange(selectionStart + 1, selectionStart + 1)
142 |       }
143 |     }}
144 |     onChange={e => {
145 |       const op = opFromInput(e.target, block.text?.toString() ?? '')
146 |       if (op && onOp && onOp(op, e))
147 |         return
148 |       if (op) {
149 |         changeBlock(b => {
150 |           const { start, removed, inserted } = op
151 |           if (removed != null) {
152 |             b.text.deleteAt!(start, removed.length)
153 |           }
154 |           if (inserted != null) {
155 |             b.text.insertAt!(start, ...inserted)
156 |           }
157 |         })
158 |       }
159 |     }}
160 |     onPaste={e => {
161 |       const { currentTarget } = e
162 |       const { selectionStart, selectionEnd } = currentTarget
163 |       for (const item of e.clipboardData.items) {
164 |         const mimeType = item.type
165 |         if (mimeType.startsWith('image/')) {
166 |           e.preventDefault()
167 |           const id = uuid.v4()
168 |           changeBlock(b => {
169 |             const { text } = b
170 |             if (selectionEnd !== selectionStart)
171 |               text.deleteAt!(selectionStart, selectionEnd - selectionStart)
172 |             text.insertAt!(selectionStart, ...`![](blob:${id})`)
173 |           });
174 |           (async () => {
175 |             const buf = await (item.getAsFile() as any).arrayBuffer()
176 |             changeWiki(w => {
177 |               if (!w.blobs) w.blobs = {}
178 |               w.blobs[id] = { data: b64.encode(buf), type: mimeType }
179 |             })
180 |           })()
181 |           break;
182 |         }
183 |       }
184 |     }}
185 |   />
186 | })
187 | 
188 | function BlockView({ block, changeBlock, textareaRef, editing, selected, onKeyDown, onOp }: {
189 |   block: Block;
190 |   changeBlock: (f: (b: Block) => void) => void;
191 |   textareaRef?: Ref<HTMLTextAreaElement>;
192 |   editing: boolean;
193 |   selected: boolean;
194 |   onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
195 |   onOp?: (op: Op, event: ChangeEvent<HTMLTextAreaElement>) => boolean | undefined;
196 | }) {
197 |   const [wiki] = useWiki()
198 |   const expandedText = expandText(
199 |     block.text.toString(),
200 |     (tag) => wiki.pages[tag]?.blocks.map(block => block.text.toString()).join("\n\n")
201 |   )
202 |   return editing && selected
203 |     ? <BlockEditor
204 |       ref={textareaRef}
205 |       block={block}
206 |       changeBlock={changeBlock}
207 |       onKeyDown={onKeyDown}
208 |       onOp={onOp}
209 |     />
210 |     : block.text.toString()?.trim()
211 |       ? <PageText
212 |         onClick={e => {
213 |           if (e.target instanceof Element && findNearestParent(e.target, n => ['A', 'SUMMARY'].includes(n.nodeName))) {
214 |             (e as any).noSelect = true
215 |             return
216 |           }
217 |           if (e.target instanceof Element && (e.target.nodeName === 'INPUT' || e.defaultPrevented)) {
218 |             const { nextElementSibling } = e.target
219 |             if (nextElementSibling && nextElementSibling.hasAttribute('x-pos')) {
220 |               changeBlock(block => {
221 |                 // TODO: this is a hack, we should encode the source position of the checkbox during parsing
222 |                 const pos = +nextElementSibling.getAttribute('x-pos')! - 3
223 |                 const str = block.text.toString()
224 |                 if (str[pos] === ' ') {
225 |                   block.text.deleteAt!(pos, 1)
226 |                   block.text.insertAt!(pos, 'x')
227 |                 } else if (str[pos] === 'x') {
228 |                   block.text.deleteAt!(pos, 1)
229 |                   block.text.insertAt!(pos, ' ')
230 |                 }
231 |               })
232 |             }
233 |             (e as any).noSelect = true
234 |             return
235 |           }
236 |         }}
237 |         text={expandedText}
238 |         getBlobURL={(id) => {
239 |           if (!blobURLs.has(id)) {
240 |             if (Object.hasOwnProperty.call(wiki?.blobs ?? {}, id)) {
241 |               const blob = wiki.blobs[id]
242 |               if (blob && typeof blob.data === 'string') {
243 |                 const { data, type } = blob
244 |                 blobURLs.set(id, URL.createObjectURL(new Blob([b64.decode(data)], { type })))
245 |               }
246 |             }
247 |           }
248 |           return blobURLs.get(id)
249 |         }} />
250 |       : <>{'\u00a0'}</>
251 | }
252 | 
253 | function Page({ title, currentTarget }: { title: string, currentTarget: string }) {
254 |   const [selected, setSelected] = useState(null as number | null)
255 |   const [editing, setEditing] = useState(false)
256 |   const [data, changeData] = usePage(title || 'meta:root')
257 |   const selectedEl = useRef<HTMLDivElement>(null)
258 |   const textarea = useRef<HTMLTextAreaElement>(null)
259 | 
260 |   useEffect(() => {
261 |     if (selectedEl.current) {
262 |       selectedEl.current.scrollIntoView({ block: "nearest" })
263 |     }
264 |   }, [selected])
265 | 
266 |   useEffect(() => {
267 |     if (!editing) {
268 |       const l = (e: KeyboardEvent) => {
269 |         if (e.key === 'ArrowUp') {
270 |           if (selected === 0) setSelected(null)
271 |           else if (selected === null) setSelected(data.blocks.length - 1)
272 |           else setSelected(selected - 1)
273 |           e.preventDefault()
274 |         } else if (e.key === 'ArrowDown') {
275 |           if (selected === data.blocks.length - 1) setSelected(null)
276 |           else if (selected === null) setSelected(0)
277 |           else setSelected(selected + 1)
278 |           e.preventDefault()
279 |         } else if (e.key === 'Enter' && selected !== null) {
280 |           setEditing(true)
281 |           requestAnimationFrame(() => {
282 |             if (textarea.current) {
283 |               const length = textarea.current.value.length
284 |               textarea.current.setSelectionRange(length, length)
285 |             }
286 |           })
287 |           e.preventDefault()
288 |         } else if (e.key === 'Escape') {
289 |           setSelected(null)
290 |           e.preventDefault()
291 |         }
292 |       }
293 |       window.addEventListener('keydown', l)
294 |       return () => {
295 |         window.removeEventListener('keydown', l)
296 |       }
297 |     } else {
298 |       const l = (e: KeyboardEvent) => {
299 |         if (e.key === 'Escape') {
300 |           setEditing(false)
301 |         }
302 |       }
303 |       window.addEventListener('keydown', l)
304 |       return () => {
305 |         window.removeEventListener('keydown', l)
306 |       }
307 |     }
308 |   }, [selected, editing, data.blocks.length])
309 | 
310 |   useEffect(() => {
311 |     function blur(e: MouseEvent) {
312 |       if (editing && textarea.current && e.target !== textarea.current) {
313 |         setEditing(false)
314 |         setSelected(null)
315 |       } else if (!editing && !findNearestParent(e.target as Element, e => e.className === 'Page')) {
316 |         setSelected(null)
317 |       }
318 |     }
319 |     window.addEventListener('mousedown', blur)
320 |     return () => {
321 |       window.removeEventListener('mousedown', blur)
322 |     }
323 |   }, [editing])
324 | 
325 |   function onClickBlock(e: React.MouseEvent<HTMLDivElement>, i: number) {
326 |     if ((e as any).noSelect)
327 |       return
328 |     setSelected(i)
329 |     setEditing(true)
330 |     // anchorNode is the node in which the selection begins. (focusNode is where it ends.)
331 |     const { anchorNode, anchorOffset } = window.getSelection() ?? {}
332 |     if (anchorNode) {
333 |       const nearestPos = findNearestParent(anchorNode, e => e.hasAttribute('x-pos'))
334 |       if (nearestPos) {
335 |         const off = +(nearestPos.getAttribute('x-pos')!) + anchorOffset!
336 |         requestAnimationFrame(() => {
337 |           textarea.current?.setSelectionRange(off, off)
338 |         })
339 |       }
340 |     }
341 |   }
342 | 
343 |   return <article className="Page">
344 |     <h1>{title}</h1>
345 |     {data.blocks.map((block, i) => {
346 |       const automergeId = Automerge.getObjectId(block)
347 |       const id = mixedId(automergeId).toString(16).padStart(8, '0')
348 |       return <div
349 |         key={automergeId}
350 |         className={`para ${selected === i ? "selected" : ""}`}
351 |         ref={selected === i ? selectedEl : null}
352 |         onClick={e => onClickBlock(e, i)}
353 |       >
354 |         <div className="id"><a id={id} href={`#${id}`} className={id === currentTarget ? 'css-target' : ''} title={id}>{id?.substr(0, 3) ?? ''}</a></div>
355 |         <BlockView
356 |           textareaRef={textarea}
357 |           editing={editing}
358 |           selected={selected === i}
359 |           block={block}
360 |           changeBlock={f => changeData(d => f(d.blocks[i]))}
361 |           onKeyDown={e => {
362 |             const { currentTarget } = e
363 |             const { selectionStart, selectionEnd } = currentTarget
364 |             if (e.key === 'Backspace' && selectionStart === 0 && selectionEnd === 0 && selected! > 0) {
365 |               // merge paras
366 |               changeData(d => {
367 |                 const prev = d.blocks[selected! - 1]
368 |                 const prevLength = prev.text.length
369 |                 prev.text.insertAt!(prev.text.length, ...d.blocks[selected!].text.toString())
370 |                 d.blocks.deleteAt!(selected!, 1)
371 |                 requestAnimationFrame(() => {
372 |                   textarea.current?.setSelectionRange(prevLength, prevLength)
373 |                 })
374 |               })
375 |               setSelected(selected! - 1)
376 |               e.preventDefault()
377 |               return
378 |             }
379 |           }}
380 |           onOp={(op, e) => {
381 |             if (op.inserted === '\n' && op.removed == null && e.target.value.substr(op.start - 1, 2) === '\n\n') {
382 |               changeData(d => {
383 |                 const str = d.blocks[selected!].text.toString().substr(op.start, d.blocks[selected!].text.length - op.start + 1)
384 |                 d.blocks[selected!].text.deleteAt!(op.start - 1, d.blocks[selected!].text.length - op.start + 1)
385 |                 d.blocks.insertAt!(selected! + 1, { text: new Automerge.Text(str) })
386 |               })
387 |               setSelected(selected! + 1)
388 |               return true // prevent the original op from being applied
389 |             }
390 |           }}
391 |         />
392 |       </div>
393 |     })}
394 |   </article>
395 | }
396 | const blobURLs = new Map<string, string>()
397 | 
398 | function isValidMetaPage(x: any): x is keyof typeof MetaPages {
399 |   return Object.prototype.hasOwnProperty.call(MetaPages, x)
400 | }
401 | 
402 | function MetaPage({ page, ...rest }: { page: string }) {
403 |   const [, meta] = /^meta:(.+)$/.exec(page) ?? []
404 |   if (isValidMetaPage(meta)) {
405 |     const Page = MetaPages[meta]
406 |     return <Page {...rest} />
407 |   } else {
408 |     return <>Unknown 'meta' page: {meta}</>
409 |   }
410 | }
411 | 
412 | const MetaPages = {
413 |   all: () => {
414 |     // eslint-disable-next-line react-hooks/rules-of-hooks
415 |     const [wiki] = useWiki()
416 |     return <div className="Page">
417 |       <h1>All Pages</h1>
418 |       <ul>
419 |         {[...allPages(wiki)].filter(x => x[1].blocks.some(x => x.text.length > 0)).sort((a, b) => a[0].localeCompare(b[0])).map(([title, _page]) => {
420 |           return <li key={title}><a href={`/${title}`} className="wikilink">{title || '/'}</a></li>
421 |         })}
422 |       </ul>
423 |     </div>
424 |   },
425 |   blobs: () => {
426 |     // eslint-disable-next-line react-hooks/rules-of-hooks
427 |     const [wiki] = useWiki()
428 |     const getBlobURL = (id: string) => {
429 |       if (!blobURLs.has(id)) {
430 |         if (Object.hasOwnProperty.call(wiki?.blobs ?? {}, id)) {
431 |           const blob = wiki.blobs[id]
432 |           if (blob && typeof blob.data === 'string') {
433 |             const { data, type } = blob
434 |             blobURLs.set(id, URL.createObjectURL(new Blob([b64.decode(data)], { type })))
435 |           }
436 |         }
437 |       }
438 |       return blobURLs.get(id)
439 |     }
440 |     return <div className="Page">
441 |       <h1>Blobs</h1>
442 |       <ul>
443 |         {[...Object.keys(wiki.blobs ?? {})].map(id => {
444 |           return <li key={id}><img src={getBlobURL(id)} style={{ width: 256, height: 256, objectFit: 'cover', display: 'block' }} alt={id} />{id}</li>
445 |         })}
446 |       </ul>
447 |     </div>
448 |   },
449 |   export: () => {
450 |     // eslint-disable-next-line react-hooks/rules-of-hooks
451 |     const [doc, change] = useWiki()
452 |     function doImport() {
453 |       const input = document.createElement('input')
454 |       input.setAttribute('type', 'file')
455 |       input.setAttribute('hidden', 'hidden')
456 |       input.onchange = () => {
457 |         if (input.files?.length) {
458 |           (input.files[0] as any).arrayBuffer().then((buf: ArrayBuffer) => {
459 |             let json: any = null
460 |             try {
461 |               const str = (new TextDecoder()).decode(buf)
462 |               json = JSON.parse(str)
463 |             } catch (e) {
464 |               alert("That doesn't look like a valid Autowiki export (not valid JSON).")
465 |               return
466 |             }
467 |             const formatError = exportFormatError(json)
468 |             if (formatError) {
469 |               alert(formatError)
470 |               return
471 |             }
472 |             const existingPages = new Set(Object.keys(doc?.pages ?? {}))
473 |             const added = Object.keys(json.wiki.pages).filter(k => !existingPages.has(k))
474 |             const replaced = Object.keys(json.wiki.pages).filter(k => existingPages.has(k))
475 |             const blobs = new Set(Object.keys(doc?.blobs ?? {}))
476 |             const newBlobs = Object.keys(json.wiki.blobs).filter(k => !blobs.has(k))
477 |             console.log(added, replaced, newBlobs)
478 |             const warn = [
479 |               { name: 'new page', values: added },
480 |               { name: 'replaced page', values: replaced },
481 |               { name: 'new blob', values: newBlobs }
482 |             ]
483 |             const warnStr = `This import contains ${warn.map(({ name, values }) => `${values.length} ${name}${values.length === 1 ? '' : 's'}`).join(', ')}. Go ahead?`
484 |             if (!window.confirm(warnStr)) {
485 |               alert('Import cancelled.')
486 |               return
487 |             }
488 |             change(doc => {
489 |               if (!doc.pages) doc.pages = {}
490 |               for (const [page, data] of Object.entries(json.wiki.pages as Record<string, { blocks: { text: string }[] }>)) {
491 |                 const existingPage = doc.pages[page]
492 |                 if (existingPage?.blocks.length === data.blocks.length && existingPage?.blocks.every((x, i) => x.text.toString() === data.blocks[i].text))
493 |                   continue
494 |                 doc.pages[page] = { blocks: data.blocks.map(str => ({ text: new Automerge.Text(str.text) })) }
495 |               }
496 |               if (!doc.blobs) doc.blobs = {}
497 |               for (const [id, blob] of Object.entries(json.wiki.blobs as Record<string, Blob>)) {
498 |                 if (!Object.hasOwnProperty.call(doc.blobs, id))
499 |                   doc.blobs[id] = blob
500 |               }
501 |             })
502 |             alert('Import complete.')
503 |           })
504 |         }
505 |       }
506 |       input.click()
507 |     }
508 |     function doExport() {
509 |       const a = document.createElement('a')
510 |       a.setAttribute('download', `autowiki-export-${(new Date().toISOString())}.json`)
511 |       const exportObj = {
512 |         _autowiki: { version: EXPORT_VERSION },
513 |         wiki: doc,
514 |       }
515 |       const exportData = JSON.stringify(exportObj)
516 |       const blobURL = URL.createObjectURL(new Blob([exportData], { type: 'application/json' }))
517 |       a.setAttribute('href', blobURL)
518 |       a.click()
519 |       setTimeout(() => {
520 |         URL.revokeObjectURL(blobURL)
521 |       }, 10000)
522 |     }
523 |     return <div className="Page">
524 |       <h1>Export/Import</h1>
525 |       <p>
526 |         <button onClick={doExport}>export</button>
527 |       </p>
528 |       <p>
529 |         <button onClick={doImport}>import</button>
530 |       </p>
531 |     </div>
532 |   }
533 | }
534 | 
535 | function Backlinks({ backlinks }: { backlinks: LinkInfo[] }) {
536 |   const backlinksByPage = useMemo(() => {
537 |     const backlinksByPage = new Map<string, LinkInfo[]>()
538 |     for (const l of backlinks) {
539 |       if (!backlinksByPage.has(l.page)) {
540 |         backlinksByPage.set(l.page, [])
541 |       }
542 |       backlinksByPage.get(l.page)!.push(l)
543 |     }
544 |     return backlinksByPage
545 |   }, [backlinks])
546 |   const backlinkingPages = [...backlinksByPage.keys()].sort()
547 |   return <article className="Page">
548 |     <h4>References</h4>
549 |     {backlinkingPages.length === 0 ? <p><em>No pages link here.</em></p> : null}
550 |     <ul>
551 |       {backlinkingPages.map(page => <li key={page}>
552 |         <a href={page ? encodeURIComponent(page) : "/"} className="wikilink">{page || "/"}</a>:
553 |         <ul>{backlinksByPage.get(page)!.map((l, i) =>
554 |           <li key={i}><BlockView block={l.context} changeBlock={() => { }} editing={false} selected={false} /></li>)}
555 |         </ul>
556 |       </li>)}
557 |     </ul>
558 |   </article>
559 | }
560 | 
561 | type LinkInfo = { page: string, context: Block }
562 | 
563 | const extractLinksCache = new WeakMap<any, any[]>()
564 | function getBlocksLinkingTo(wiki: Automerge.Doc<Wiki>, pageTitle: string): LinkInfo[] {
565 |   const links: LinkInfo[] = []
566 |   for (const [k, v] of allPages(wiki)) {
567 |     if (k === pageTitle) continue
568 |     for (const block of v.blocks) {
569 |       if (!extractLinksCache.has(block.text)) {
570 |         const links = extractLinks(block.text.toString())
571 |         extractLinksCache.set(block.text, links)
572 |       }
573 |       const cachedLinks = extractLinksCache.get(block.text)!
574 |       for (const link of cachedLinks) {
575 |         const page = link.href.split(/#/)[0]
576 |         if (page === pageTitle)
577 |           links.push({ page: k, context: block })
578 |       }
579 |     }
580 |   }
581 |   return links
582 | }
583 | 
584 | function useDocumentTitle(title: string) {
585 |   useEffect(() => {
586 |     document.title = title;
587 |   }, [title])
588 | }
589 | 
590 | function ReplicationStateIndicator({ state, onClick }: { state: Record<string, ReplicationState>, onClick?: React.MouseEventHandler<HTMLDivElement> }) {
591 |   const aggregateState = Object.values(state).reduce((m, o) => {
592 |     if (m === 'offline') {
593 |       return o !== 'offline' ? o : m
594 |     } else if (m === 'behind') {
595 |       return 'behind'
596 |     } else if (m === 'synced') {
597 |       return o === 'behind' ? o : m
598 |     }
599 |     return m
600 |   }, 'offline' as ReplicationState)
601 |   return <div className={`ReplicationStateIndicator ${aggregateState}`} onClick={onClick}>
602 |     <div className="bubble" />
603 |   </div>
604 | }
605 | 
606 | function AppWrapper() {
607 |   const [doc, setDoc] = useState<Automerge.Doc<Wiki>>(null as any)
608 |   const docId = 'default'
609 |   useEffect(() => {
610 |     let cancel = false
611 |     console.time('load')
612 |     db.getDoc(docId).then(({ serializedDoc, changes }) => {
613 |       if (cancel) return
614 |       console.timeEnd('load')
615 |       console.time('apply')
616 |       let active = false
617 |       const options: Automerge.InitOptions<Wiki> = {
618 |         patchCallback: async (_diff, _before, _after, _local, changes) => {
619 |           if (!active) return
620 |           console.time('save')
621 |           for (const change of changes) {
622 |             const { hash } = Automerge.decodeChange(change)
623 |             await db.storeChange(docId, hash!, change)
624 |           }
625 |           console.timeEnd('save')
626 |           sharedWorker.port.postMessage({ docId })
627 |         }
628 |       }
629 |       const [doc,] = Automerge.applyChanges(
630 |         serializedDoc ? Automerge.load(serializedDoc, options) : Automerge.init(options),
631 |         changes
632 |       )
633 |       console.timeEnd('apply')
634 |       active = true
635 |       setDoc(doc as Automerge.Doc<Wiki>)
636 |     })
637 |     return () => { cancel = true }
638 |   }, [])
639 |   const change = useCallback((fn: Automerge.ChangeFn<Wiki>) => {
640 |     setDoc(doc => Automerge.change(doc, fn)!)
641 |   }, [])
642 |   return <WikiDocument.Provider value={[doc!, change, setDoc]}>
643 |     {doc ? <App /> : 'Loading...'}
644 |   </WikiDocument.Provider>
645 | }
646 | 
647 | function App() {
648 |   const [{ pathname, hash }, navigate] = useHistory()
649 |   const [peers, setPeers] = useState<string[]>(() => JSON.parse(localStorage.getItem('peers') ?? '[]'))
650 |   const [peerState, setPeerState] = useState<Record<string, ReplicationState>>({})
651 |   const [showSwitcher, setShowSwitcher] = useState(false)
652 |   const pageTitle = decodeURIComponent(pathname.substring(1))
653 |   useDocumentTitle(pageTitle)
654 | 
655 |   useEffect(() => {
656 |     function onClick(e: MouseEvent) {
657 |       if (!(e.metaKey || e.ctrlKey || e.shiftKey) && e.target instanceof HTMLElement && e.target.tagName.toLowerCase() === 'a' && e.target.classList.contains('wikilink')) {
658 |         const target = e.target.getAttribute('href')
659 |         if (target) {
660 |           navigate(target)
661 |           e.preventDefault()
662 |           return
663 |         }
664 |       }
665 |     }
666 |     window.addEventListener('click', onClick)
667 |     return () => {
668 |       window.removeEventListener('click', onClick)
669 |     }
670 |   }, [navigate])
671 |   const [wiki, , updateDoc] = useWiki()
672 | 
673 |   const backlinks = useMemo(() => getBlocksLinkingTo(wiki, pageTitle), [pageTitle, wiki])
674 | 
675 |   useEffect(() => {
676 |     const keydown = (e: KeyboardEvent) => {
677 |       if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
678 |         setShowSwitcher(d => !d)
679 |       }
680 |     }
681 |     window.addEventListener('keydown', keydown)
682 |     return () => {
683 |       window.removeEventListener('keydown', keydown)
684 |     }
685 |   }, [])
686 | 
687 |   return <>
688 |     {<Replicate doc={wiki} updateDoc={updateDoc} peers={peers} onStateChange={(peer, state) => { setPeerState(s => ({ ...s, [peer]: state })) }} />}
689 |     {pageTitle.startsWith('meta:')
690 |       ? <MetaPage page={pageTitle} />
691 |       : <>
692 |         <Page key={pageTitle} title={pageTitle} currentTarget={hash.substring(1)} />
693 |         <Backlinks backlinks={backlinks} />
694 |       </>}
695 |     <ReplicationStateIndicator state={peerState} onClick={() => {
696 |       const newPeerString = prompt("Peers?", peers.join(','))
697 |       if (newPeerString) {
698 |         const newPeers = newPeerString.split(',').map(x => x.trim()).filter(x => x)
699 |         setPeers(newPeers)
700 |         localStorage.setItem('peers', JSON.stringify(newPeers))
701 |       }
702 |     }} />
703 |     {showSwitcher ? <Switcher dismiss={() => setShowSwitcher(false)} /> : null}
704 |   </>;
705 | }
706 | 
707 | function Switcher({ dismiss }: { dismiss?: () => void }) {
708 |   const [wiki] = useWiki()
709 |   const [search, setSearch] = useState('')
710 |   const matches = Object.keys(wiki.pages).filter(x => x.toLowerCase().includes(search.toLowerCase()))
711 |   useEffect(() => {
712 |     const l = (e: KeyboardEvent) => {
713 |       if (e.code === 'Escape') dismiss && dismiss()
714 |     }
715 |     window.addEventListener('keydown', l)
716 |     return () => {
717 |       window.removeEventListener('keydown', l)
718 |     }
719 |   }, [])
720 |   return <div className="modal-backdrop" onClick={e => {
721 |     if (e.target === e.currentTarget) {
722 |       dismiss && dismiss()
723 |     }
724 |   }}>
725 |     <div className="Switcher">
726 |       <input autoFocus onChange={e => setSearch(e.target.value)} />
727 |       <ul>
728 |         {matches.map(m => {
729 |           return <li><a href={encodeURIComponent(m)} className="wikilink" onClick={dismiss}>{m}</a></li>
730 |         })}
731 |       </ul>
732 |       {search.trim().length === 0 || matches.some(x => x === search) ? null : <div>New page: <a href={'/' + encodeURIComponent(search.trim())} className="wikilink" onClick={dismiss}>{search.trim()}</a></div>}
733 |     </div>
734 |   </div>
735 | }
736 | 
737 | export default AppWrapper;
738 | 


--------------------------------------------------------------------------------
/src/ExpandingTextArea.tsx:
--------------------------------------------------------------------------------
 1 | import React, { forwardRef } from 'react';
 2 | 
 3 | function ExpandingTextAreaUnforwarded(opts: React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, ref: any) {
 4 |   return (
 5 |     <div className="expandingArea">
 6 |       <pre><span>{opts.value}</span><br/></pre>
 7 |       <textarea {...opts} ref={ref}></textarea>
 8 |     </div>
 9 |   )
10 | }
11 | export const ExpandingTextArea = forwardRef(ExpandingTextAreaUnforwarded)
12 | 


--------------------------------------------------------------------------------
/src/PageText.tsx:
--------------------------------------------------------------------------------
  1 | import React, { DOMAttributes, useLayoutEffect, useMemo, useRef } from "react"
  2 | 
  3 | import markdown from 'remark-parse';
  4 | import remark2rehype from 'remark-rehype';
  5 | import remarkGfm from 'remark-gfm';
  6 | import highlight from 'remark-highlight.js';
  7 | import raw from 'rehype-raw';
  8 | import stringify from 'rehype-stringify';
  9 | import { unified } from 'unified';
 10 | import { u } from 'unist-builder'
 11 | import { visit } from 'unist-util-visit';
 12 | import wikiLink from 'remark-wiki-link';
 13 | import { remarkTruncateLinks } from 'remark-truncate-links';
 14 | import 'highlight.js/styles/github.css';
 15 | 
 16 | 
 17 | function makeCheckboxesEnabled() {
 18 |   return function(tree: any) {
 19 |     visit(tree, ((e: any) => e.type === 'element' && e.tagName === 'input' && e.properties.type === 'checkbox') as any, (node) => {
 20 |       delete (node as any).properties.disabled
 21 |     })
 22 |   }
 23 | }
 24 | 
 25 | function imageBlobReferences({getBlobURL}: {getBlobURL?: (id: string) => string | undefined}) {
 26 |   return function(tree: any) {
 27 |     if (getBlobURL) {
 28 |       visit(tree, ((e: any) => e.type === 'element' && e.tagName === 'img' && e.properties.src.startsWith('blob:')) as any, (node: any) => {
 29 |         node.properties.src = getBlobURL(node.properties.src.split(':')[1])
 30 |       })
 31 |     }
 32 |   }
 33 | }
 34 | 
 35 | function pipeline(getBlobURL?: (id: string) => string | undefined) {
 36 |   return unified()
 37 |     .use(markdown)
 38 |     .use(remarkGfm)
 39 |     .use(highlight)
 40 |     .use(wikiLink, {
 41 |       hrefTemplate: (link: string) => `/${link}`,
 42 |       pageResolver: (name: string) => [name],
 43 |       aliasDivider: '|',
 44 |       wikiLinkClassName: 'wikilink',
 45 |     })
 46 |     .use(remarkTruncateLinks, { length: 60 })
 47 |     .use(remark2rehype, {
 48 |       allowDangerousHtml: true,
 49 |       handlers: {
 50 |         code(h, node: any) {
 51 |           var value = node.value ? node.value + '\n' : ''
 52 |           var lang = node.lang && (node.lang as any).match(/^[^ \t]+(?=[ \t]|$)/)
 53 |           var props: any = {}
 54 | 
 55 |           if (lang) {
 56 |             props.className = ['language-' + lang]
 57 |           }
 58 |           props['x-pos'] = node.position!.start.offset! + 4 + (lang?.length ?? 0)
 59 | 
 60 |           return h((node as any).position, 'pre', [h(node, 'code', props, [u('text', value)])])
 61 |         },
 62 |         inlineCode(h, node: any) {
 63 |           var value = node.value.replace(/\r?\n|\r/g, ' ')
 64 |           return h(node, 'code', {'x-pos': node.position?.start.offset + 1}, [u('text', value)])
 65 |         },
 66 |         text(h, node: any) {
 67 |           return h.augment(
 68 |             node,
 69 |             u('element',
 70 |               {tagName: 'span', properties: {'x-pos': node.position?.start.offset}},
 71 |               [u('text', String(node.value).replace(/[ \t]*(\r?\n|\r)[ \t]*/g, '$1'))])
 72 |           )
 73 |         }
 74 |       }
 75 |     })
 76 |     .use(makeCheckboxesEnabled)
 77 |     .use([raw])
 78 |     .use(imageBlobReferences, {getBlobURL})
 79 |     .use(stringify)
 80 | }
 81 | 
 82 | function renderMarkdownToHtml(text: string, getBlobURL?: (id: string) => string | undefined) {
 83 |   return pipeline(getBlobURL)
 84 |     .processSync(text)
 85 |     .toString('utf8')
 86 | }
 87 | 
 88 | export default function PageText({text, getBlobURL, ...rest}: {text: string, getBlobURL?: (id: string) => string | undefined} & DOMAttributes<HTMLDivElement>) {
 89 |   const html = useMemo(() => {
 90 |     return renderMarkdownToHtml(text, getBlobURL)
 91 |   }, [text])
 92 |   const ref = useRef<HTMLDivElement>(null)
 93 |   useLayoutEffect(() => {
 94 |     ref.current?.querySelectorAll('script').forEach(s => {
 95 |       const parent = s.parentNode!
 96 |       const newS = document.createElement('script')
 97 |       newS.textContent = s.textContent
 98 |       parent.replaceChild(newS, s)
 99 |     })
100 |   }, [text])
101 |   return <div ref={ref} dangerouslySetInnerHTML={ { __html: html } } {...rest} />
102 | }
103 | 
104 | export function extractLinks(text: string): any[] {
105 |   const tree = pipeline().parse(text)
106 |   const links: {href: string}[] = []
107 |   visit(tree, 'wikiLink', (node: any) => {
108 |     links.push({href: node.value as string})
109 |   })
110 |   return links
111 | }
112 | 


--------------------------------------------------------------------------------
/src/Replicate.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useRef, useEffect, useState } from 'react'
 2 | import Automerge, {BinarySyncMessage} from 'automerge';
 3 | import ReconnectingWebSocket from 'reconnecting-websocket';
 4 | 
 5 | export type ReplicationState = 'offline' | 'synced' | 'behind'
 6 | 
 7 | function ReplicationPeer<T>({doc, updateDoc, peer, onStateChange}: {doc: Automerge.Doc<T>, updateDoc: (f: (doc: Automerge.Doc<T>) => Automerge.Doc<T>) => void, peer: string, onStateChange: (s: ReplicationState) => void}) {
 8 |   const syncState = useRef(Automerge.initSyncState())
 9 |   const [ws, setWs] = useState<ReconnectingWebSocket | null>(null)
10 |   useEffect(() => {
11 |     const [, key, host] = /^(?:([^@]+)@)?(.+)$/.exec(peer)!
12 |     const {hostname} = new URL(`http://${host}`)
13 |     const isLocal = hostname === '127.0.0.1' || hostname === 'localhost' || hostname === '[::]'
14 |     const protocol = window.location.protocol === 'https:' && !isLocal ? 'wss' : 'ws'
15 |     const ws = new ReconnectingWebSocket(`${protocol}://${host}?key=${key}`, [], {maxEnqueuedMessages: 0})
16 |     ws.binaryType = 'arraybuffer'
17 |     ws.onmessage = (e) => {
18 |       if (e.data.byteLength === 0) {
19 |         onStateChange('synced')
20 |         return
21 |       }
22 |       const message = new Uint8Array(e.data)
23 |       updateDoc(doc => {
24 |         const [newDoc, newSyncState] = Automerge.receiveSyncMessage(doc, syncState.current, message as BinarySyncMessage)
25 |         console.time('generateSyncMessage')
26 |         const [newNewSyncState, msg] = Automerge.generateSyncMessage(newDoc, newSyncState)
27 |         console.timeEnd('generateSyncMessage')
28 |         syncState.current = newNewSyncState
29 |         if (msg) {
30 |           ws.send(msg)
31 |         } else {
32 |           ws.send(new Uint8Array())
33 |           onStateChange('synced')
34 |         }
35 |         return newDoc
36 |       })
37 |     }
38 |     ws.onopen = () => {
39 |       syncState.current = Automerge.initSyncState()
40 |       setWs(null) // this is to trigger the effect below which sends initial state
41 |       setWs(ws)
42 |     }
43 |     ws.onclose = () => {
44 |       onStateChange('offline')
45 |     }
46 |     return () => {
47 |       onStateChange('offline')
48 |       ws.close()
49 |     }
50 |   }, [peer, updateDoc])
51 |   useEffect(() => {
52 |     if (ws?.readyState === WebSocket.OPEN) {
53 |       console.time('generateSyncMessage')
54 |       const [nextSyncState, msg] = Automerge.generateSyncMessage(doc, syncState.current)
55 |       console.timeEnd('generateSyncMessage')
56 |       syncState.current = nextSyncState
57 |       if (msg) {
58 |         onStateChange('behind')
59 |         ws.send(msg)
60 |       }
61 |     }
62 |   }, [doc, ws])
63 | 
64 |   return null
65 | }
66 | 
67 | export function Replicate<T>({doc, updateDoc, peers, onStateChange}: {doc: Automerge.Doc<T>, updateDoc: (f: (doc: Automerge.Doc<T>) => Automerge.Doc<T>) => void, peers: string[], onStateChange: (peer: string, state: ReplicationState) => void}) {
68 |   return <>{peers.map(p => <ReplicationPeer doc={doc} updateDoc={updateDoc} peer={p} key={p} onStateChange={s => onStateChange(p, s)} />)}</>
69 | }
70 | 


--------------------------------------------------------------------------------
/src/db.ts:
--------------------------------------------------------------------------------
  1 | import { openDB } from 'idb/with-async-ittr'
  2 | import type { IDBPDatabase } from 'idb/with-async-ittr'
  3 | import Automerge from 'automerge'
  4 | 
  5 | // The limit of changes to keep before db.saveSnapshot will do serialization
  6 | const MAX_CHANGES_TO_KEEP = 100
  7 | 
  8 | export class DB {
  9 |   db: Promise<IDBPDatabase<any>>
 10 | 
 11 |   constructor(name: string) {
 12 |     this.db = openDB(name, 1, {
 13 |       upgrade(db, oldVersion, newVersion, transaction) {
 14 |         // Reset db
 15 |         const storeNames = db.objectStoreNames
 16 |         for (const name of storeNames)
 17 |           db.deleteObjectStore(name)
 18 | 
 19 |         const changeStore = db.createObjectStore('changes', {
 20 |           keyPath: 'hash',
 21 |         })
 22 |         changeStore.createIndex('docId', 'docId', { unique: false })
 23 |         changeStore.createIndex('timestamp', 'timestamp', { unique: false })
 24 | 
 25 |         const snapshotStore = db.createObjectStore('snapshots', {
 26 |           keyPath: 'docId',
 27 |         })
 28 |       },
 29 |     })
 30 |   }
 31 | 
 32 |   async storeChange(docId: string, hash: string, change: Uint8Array) {
 33 |     const db = await this.db
 34 |     const tx = db.transaction('changes', 'readwrite')
 35 |     const store = tx.objectStore('changes')
 36 |     if (await store.get(hash)) {
 37 |       // We already have this change; do nothing.
 38 |       return
 39 |     }
 40 | 
 41 |     if (change.buffer.byteLength !== change.byteLength) {
 42 |       const newChange = new Uint8Array(change.byteLength)
 43 |       newChange.set(change)
 44 |       change = newChange
 45 |     }
 46 | 
 47 |     await db.add('changes', {
 48 |       docId,
 49 |       hash,
 50 |       change,
 51 |       timestamp: Date.now(),
 52 |     })
 53 |   }
 54 | 
 55 |   async getChanges(docId: string) {
 56 |     const singleKeyRange = IDBKeyRange.only(docId)
 57 |     const db = await this.db
 58 |     const values = await db.getAllFromIndex('changes', 'docId', singleKeyRange)
 59 |     return values.map((v) => v.change)
 60 |   }
 61 | 
 62 |   async getDoc(docId: string) {
 63 |     const db = await this.db
 64 |     // Get latest snapshot if it exists
 65 |     const snapshot = await db.get('snapshots', docId)
 66 | 
 67 |     // Get outstanding changes
 68 |     const singleKeyRange = IDBKeyRange.only(docId)
 69 |     const changes = []
 70 |     let lastChangeTime: number = 0
 71 |     for await (const cursor of db.transaction('changes').store.index('docId').iterate(singleKeyRange)) {
 72 |       changes.push(cursor.value.change)
 73 |       lastChangeTime = Math.max(cursor.value.timestamp, lastChangeTime)
 74 |     }
 75 | 
 76 |     // topo sort changes to work around https://github.com/automerge/automerge/commit/62b9f780fe5fc066b03cd1df628c0b68b82d0a80
 77 |     const decodedChanges = new Map<any, Automerge.Change>()
 78 |     const changesByHash = new Map<string, any>()
 79 |     for (const change of changes) {
 80 |       const d = Automerge.decodeChange(change)
 81 |       changesByHash.set(d.hash!, change)
 82 |       decodedChanges.set(change, d)
 83 |     }
 84 |     const sortedChanges = topologicalSort(changes, c => {
 85 |       const d = decodedChanges.get(c)!
 86 |       return d.deps.map(h => changesByHash.get(h))
 87 |     })
 88 | 
 89 |     return {
 90 |       serializedDoc: snapshot?.serializedDoc,
 91 |       changes: sortedChanges,
 92 |       lastChangeTime,
 93 |     }
 94 |   }
 95 | 
 96 |   async saveSnapshot(docId: string) {
 97 |     const { serializedDoc, changes, lastChangeTime } = await this.getDoc(docId)
 98 |     // Bail out of saving snapshot if changes are under threshold
 99 |     if (changes.length < MAX_CHANGES_TO_KEEP) return
100 |     // Create AM doc
101 |     let doc = serializedDoc ? Automerge.load(serializedDoc) : Automerge.init()
102 |     doc = Automerge.applyChanges(doc, changes)[0]
103 |     // Serialize and save with timestamp
104 |     const nextSerializedDoc = Automerge.save(doc)
105 |     const db = await this.db
106 |     await db.put('snapshots', {
107 |       docId,
108 |       serializedDoc: nextSerializedDoc,
109 |       timestamp: Date.now(),
110 |     })
111 |     // Delete changes before lastChangeTime
112 |     const oldChangesKeyRange = IDBKeyRange.upperBound(lastChangeTime)
113 |     const index = db
114 |       .transaction('changes', 'readwrite')
115 |       .store.index('timestamp')
116 | 
117 |     let cursor = await index.openCursor(oldChangesKeyRange)
118 |     while (cursor) {
119 |       cursor.delete()
120 |       cursor = await cursor.continue()
121 |     }
122 |   }
123 | }
124 | 
125 | function topologicalSort<T>(xs: T[], outgoingEdges: (n: T) => T[]) {
126 |   const result: T[] = [];
127 |   let isDag = true;
128 |   const unmarked = new Set(xs);
129 |   const tempMarks = new Set();
130 |   while (unmarked.size) {
131 |     const n = unmarked.values().next().value as T;
132 |     visit(n);
133 |     if (!isDag) {
134 |       throw new Error("Not a DAG");
135 |     }
136 |   }
137 |   return result;
138 | 
139 |   function visit(n: T) {
140 |     if (!unmarked.has(n)) return;
141 |     if (tempMarks.has(n)) {
142 |       isDag = false;
143 |       return;
144 |     }
145 |     tempMarks.add(n);
146 |     for (const m of outgoingEdges(n)) {
147 |       visit(m);
148 |     }
149 |     tempMarks.delete(n);
150 |     unmarked.delete(n);
151 |     result.push(n);
152 |   }
153 | }
154 | 


--------------------------------------------------------------------------------
/src/export.ts:
--------------------------------------------------------------------------------
 1 | //import * as b64 from 'base64-arraybuffer';
 2 | 
 3 | type Base64String = string
 4 | type ExportFormatV0 = {
 5 |   _autowiki: { version: 1 },
 6 |   wiki: Record<string, string[]>,
 7 |   blobs: Record<string, {data: Base64String, type: string}>
 8 | }
 9 | /*
10 | type ExportFormatV1 = {
11 |   _autowiki: { version: 2 }
12 |   wiki: Record<string, {blocks: Array<{text: string}>}>
13 |   blobs: Record<string, {data: Base64String, type: string}>
14 | }
15 | */
16 | const IMPORT_TRANSFORMERS = [
17 |   (x: any): ExportFormatV0 => x,
18 |   /*
19 |   (x: ExportFormatV0): ExportFormatV1 => ({
20 |     _autowiki: { ...x._autowiki, version: 2 },
21 |     //wiki: Object.fromEntries(Object.entries(x.wiki).map(([k, v]) => [k, {blocks: [{text: v}]}])),
22 |     blobs: x.blobs
23 |   }),
24 |   */
25 | ] as const
26 | 
27 | type GetLength<original extends Readonly<any[]>> = original extends { length: infer L } ? L : never
28 | type Prev<T extends number> = [-1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62][T];
29 | type GetLast<original extends Readonly<any[]>> = original[Prev<GetLength<original>>]
30 | 
31 | type AssertEquals<A, B> = A extends B ? B extends A ? true : never : never;
32 | type LatestExportFormat = ReturnType<GetLast<typeof IMPORT_TRANSFORMERS>>
33 | type LatestExportVersion = LatestExportFormat["_autowiki"]["version"]
34 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
35 | const staticAssert_lastVersionNumberEqualsLengthOfVersionTransformerArray: AssertEquals<LatestExportVersion, GetLength<typeof IMPORT_TRANSFORMERS>> = true
36 | 
37 | // TODO: would be awesome if typescript could fill in the value here, as it's singly-occupied. https://www.npmjs.com/package/ts-reflection maybe?
38 | export const EXPORT_VERSION: LatestExportVersion = 1
39 | 
40 | /*
41 | export const serialize = (doc: Y.Doc): LatestExportFormat => {
42 |   return {
43 |     _autowiki: { version: EXPORT_VERSION },
44 |     wiki: doc.getMap('wiki').toJSON(),
45 |     blobs: Object.fromEntries([
46 |       ...Object.entries(doc.getMap('blobs').toJSON())
47 |     ].map(([k, v]: [string, any]) => [k, {...v, data: b64.encode(v.data)}])),
48 |   }
49 | }
50 | */
51 | 
52 |   /*
53 | export const deserialize = (doc: Y.Doc, data: any) => {
54 |   const transformers = IMPORT_TRANSFORMERS.slice(data._autowiki.version)
55 |   const transformedData: LatestExportFormat = transformers.reduce((data, transformer) => transformer(data), data)
56 | 
57 |   doc.transact(() => {
58 |     const wiki: Y.Map<Y.Array<Y.Text>> = doc.getMap('wiki')
59 |     for (const [page, data] of Object.entries(transformedData.wiki)) {
60 |       const existingPage = wiki.get(page)
61 |       if (existingPage?.length === data.length && existingPage?.toArray().every((x, i) => x.toString() === data[i]))
62 |         continue
63 |       const arr = new Y.Array<Y.Text>()
64 |       arr.push(data.map(str => new Y.Text(str)))
65 |       wiki.set(page, arr)
66 |     }
67 |     type BlobData = {data: Uint8Array, type: string}
68 |     const blobs: Y.Map<BlobData> = doc.getMap('blobs')
69 |     for (const [hash, blob] of Object.entries<any>(data.blobs)) {
70 |       if (blobs.has(hash))
71 |         continue
72 |       blobs.set(hash, {
73 |         ...blob,
74 |         data: new Uint8Array(b64.decode(blob.data))
75 |       })
76 |     }
77 |   })
78 | }
79 | */
80 | 
81 | export const exportFormatError = (json: any): string | undefined => {
82 |   if (!json._autowiki) {
83 |     return "That doesn't look like a valid Autowiki export."
84 |   }
85 |   if (json._autowiki.version > EXPORT_VERSION) {
86 |     return "That file is too new for this version of Autowiki :("
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'remarkable/linkify';
2 | declare module 'remark-wiki-link'
3 | declare module 'remark-highlight.js'
4 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(<App />, document.getElementById('root'));
 8 | 
 9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: https://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 | 


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/src/requestPersistentStorage.ts:
--------------------------------------------------------------------------------
 1 | export const requestPersistentStorage = (() => {
 2 |   let persistentStorageRequested = false
 3 |   return async function requestPersistentStorage() {
 4 |     if (!persistentStorageRequested) {
 5 |       persistentStorageRequested = true
 6 |       if (navigator.storage && navigator.storage.persist) {
 7 |         const isPersisted = await navigator.storage.persist()
 8 |         if (!isPersisted) {
 9 |           // TODO: warn the user more clearly
10 |           console.warn("Navigator declined persistent storage")
11 |         }
12 |       } else {
13 |         console.warn("Navigator does not support persistent storage")
14 |       }
15 |     }
16 |   }
17 | })()
18 | 


--------------------------------------------------------------------------------
/src/serviceWorker.ts:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | type Config = {
 24 |   onSuccess?: (registration: ServiceWorkerRegistration) => void;
 25 |   onUpdate?: (registration: ServiceWorkerRegistration) => void;
 26 | };
 27 | 
 28 | export function register(config?: Config) {
 29 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 30 |     // The URL constructor is available in all browsers that support SW.
 31 |     const publicUrl = new URL(
 32 |       process.env.PUBLIC_URL,
 33 |       window.location.href
 34 |     );
 35 |     if (publicUrl.origin !== window.location.origin) {
 36 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 37 |       // from what our page is served on. This might happen if a CDN is used to
 38 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 39 |       return;
 40 |     }
 41 | 
 42 |     window.addEventListener('load', () => {
 43 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 44 | 
 45 |       if (isLocalhost) {
 46 |         // This is running on localhost. Let's check if a service worker still exists or not.
 47 |         checkValidServiceWorker(swUrl, config);
 48 | 
 49 |         // Add some additional logging to localhost, pointing developers to the
 50 |         // service worker/PWA documentation.
 51 |         navigator.serviceWorker.ready.then(() => {
 52 |           console.log(
 53 |             'This web app is being served cache-first by a service ' +
 54 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 55 |           );
 56 |         });
 57 |       } else {
 58 |         // Is not localhost. Just register service worker
 59 |         registerValidSW(swUrl, config);
 60 |       }
 61 |     });
 62 |   }
 63 | }
 64 | 
 65 | function registerValidSW(swUrl: string, config?: Config) {
 66 |   navigator.serviceWorker
 67 |     .register(swUrl)
 68 |     .then(registration => {
 69 |       registration.onupdatefound = () => {
 70 |         const installingWorker = registration.installing;
 71 |         if (installingWorker == null) {
 72 |           return;
 73 |         }
 74 |         installingWorker.onstatechange = () => {
 75 |           if (installingWorker.state === 'installed') {
 76 |             if (navigator.serviceWorker.controller) {
 77 |               // At this point, the updated precached content has been fetched,
 78 |               // but the previous service worker will still serve the older
 79 |               // content until all client tabs are closed.
 80 |               console.log(
 81 |                 'New content is available and will be used when all ' +
 82 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 83 |               );
 84 | 
 85 |               // Execute callback
 86 |               if (config && config.onUpdate) {
 87 |                 config.onUpdate(registration);
 88 |               }
 89 |             } else {
 90 |               // At this point, everything has been precached.
 91 |               // It's the perfect time to display a
 92 |               // "Content is cached for offline use." message.
 93 |               console.log('Content is cached for offline use.');
 94 | 
 95 |               // Execute callback
 96 |               if (config && config.onSuccess) {
 97 |                 config.onSuccess(registration);
 98 |               }
 99 |             }
100 |           }
101 |         };
102 |       };
103 |     })
104 |     .catch(error => {
105 |       console.error('Error during service worker registration:', error);
106 |     });
107 | }
108 | 
109 | function checkValidServiceWorker(swUrl: string, config?: Config) {
110 |   // Check if the service worker can be found. If it can't reload the page.
111 |   fetch(swUrl, {
112 |     headers: { 'Service-Worker': 'script' }
113 |   })
114 |     .then(response => {
115 |       // Ensure service worker exists, and that we really are getting a JS file.
116 |       const contentType = response.headers.get('content-type');
117 |       if (
118 |         response.status === 404 ||
119 |         (contentType != null && contentType.indexOf('javascript') === -1)
120 |       ) {
121 |         // No service worker found. Probably a different app. Reload the page.
122 |         navigator.serviceWorker.ready.then(registration => {
123 |           registration.unregister().then(() => {
124 |             window.location.reload();
125 |           });
126 |         });
127 |       } else {
128 |         // Service worker found. Proceed as normal.
129 |         registerValidSW(swUrl, config);
130 |       }
131 |     })
132 |     .catch(() => {
133 |       console.log(
134 |         'No internet connection found. App is running in offline mode.'
135 |       );
136 |     });
137 | }
138 | 
139 | export function unregister() {
140 |   if ('serviceWorker' in navigator) {
141 |     navigator.serviceWorker.ready
142 |       .then(registration => {
143 |         registration.unregister();
144 |       })
145 |       .catch(error => {
146 |         console.error(error.message);
147 |       });
148 |   }
149 | }
150 | 


--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 | 


--------------------------------------------------------------------------------
/src/textarea-op.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | function getInputEnd(element: HTMLTextAreaElement, previous: string, value: string): number | null {
 3 |   var end = value.length - element.selectionStart;
 4 |   if (end === 0) return end;
 5 |   if (previous.slice(previous.length - end) !== value.slice(value.length - end)) return null;
 6 |   return end;
 7 | };
 8 | 
 9 | export type Op = {
10 |   start: number, inserted?: string, removed?: string
11 | }
12 | 
13 | export function opFromInput(element: HTMLTextAreaElement, previous: string): Op | null {
14 |   var value = element.value;
15 |   if (previous === value) return null;
16 | 
17 |   var start = 0;
18 |   // Attempt to use the DOM cursor position to find the end
19 |   var end = getInputEnd(element, previous, value);
20 |   if (end === null) {
21 |     // If we failed to find the end based on the cursor, do a diff. When
22 |     // ambiguous, prefer to locate ops at the end of the string, since users
23 |     // more frequently add or remove from the end of a text input
24 |     while (previous.charAt(start) === value.charAt(start)) {
25 |       start++;
26 |     }
27 |     end = 0;
28 |     while (
29 |       previous.charAt(previous.length - 1 - end) === value.charAt(value.length - 1 - end) &&
30 |       end + start < previous.length &&
31 |       end + start < value.length
32 |     ) {
33 |       end++;
34 |     }
35 |   } else {
36 |     while (
37 |       previous.charAt(start) === value.charAt(start) &&
38 |       start + end < previous.length &&
39 |       start + end < value.length
40 |     ) {
41 |       start++;
42 |     }
43 |   }
44 | 
45 |   const op: Op = { start }
46 |   if (previous.length !== start + end) {
47 |     var removed = previous.slice(start, previous.length - end);
48 |     op.removed = removed
49 |   }
50 |   if (value.length !== start + end) {
51 |     var inserted = value.slice(start, value.length - end);
52 |     op.inserted = inserted
53 |   }
54 |   return op
55 | }
56 | 
57 | /*
58 | TextDiffBinding.prototype.onInsert = function(index, length) {
59 |   this._transformSelectionAndUpdate(index, length, insertCursorTransform);
60 | };
61 | function insertCursorTransform(index, length, cursor) {
62 |   return (index < cursor) ? cursor + length : cursor;
63 | }
64 | 
65 | TextDiffBinding.prototype.onRemove = function(index, length) {
66 |   this._transformSelectionAndUpdate(index, length, removeCursorTransform);
67 | };
68 | function removeCursorTransform(index, length, cursor) {
69 |   return (index < cursor) ? cursor - Math.min(length, cursor - index) : cursor;
70 | }
71 | 
72 | TextDiffBinding.prototype._transformSelectionAndUpdate = function(index, length, transformCursor) {
73 |   if (document.activeElement === this.element) {
74 |     var selectionStart = transformCursor(index, length, this.element.selectionStart);
75 |     var selectionEnd = transformCursor(index, length, this.element.selectionEnd);
76 |     var selectionDirection = this.element.selectionDirection;
77 |     this.update();
78 |     this.element.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
79 |   } else {
80 |     this.update();
81 |   }
82 | };
83 | 
84 | TextDiffBinding.prototype.update = function() {
85 |   var value = this._get();
86 |   if (this._getElementValue() === value) return;
87 |   this.element.value = value;
88 | };
89 | */


--------------------------------------------------------------------------------
/src/useHistory.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect, useCallback } from 'react';
 2 | 
 3 | let store = { pathname: window.location.pathname, hash: window.location.hash }
 4 | const listeners = new Set<Function>()
 5 | const set = (v: typeof store) => {
 6 |   store = v
 7 |   listeners.forEach(x => x(v))
 8 | }
 9 | 
10 | export const useHistory = (): [{pathname: string, hash: string}, (s: string) => void] => {
11 |   const [{pathname, hash}, setState] = useState(store)
12 |   useEffect(() => {
13 |     listeners.add(setState)
14 |     return () => { listeners.delete(setState) }
15 |   }, [])
16 | 
17 |   const navigate = useCallback((href: string) => {
18 |     window.history.pushState(null, '', href)
19 |     set({pathname: window.location.pathname, hash: window.location.hash})
20 |     if (window.location.hash.length > 1)
21 |       document.getElementById(window.location.hash.substring(1))?.scrollIntoView()
22 |     else
23 |       window.scrollTo(0, 0)
24 |   }, [])
25 | 
26 |   // TODO: only one global popstate handler, refcounted?
27 |   useEffect(() => {
28 |     function handlePopState() {
29 |       set({pathname: window.location.pathname, hash: window.location.hash})
30 |     }
31 |     window.addEventListener('popstate', handlePopState)
32 |     return () => {
33 |       window.removeEventListener('popstate', handlePopState)
34 |     }
35 |   }, [])
36 |   return [{pathname, hash}, navigate]
37 | }
38 | 


--------------------------------------------------------------------------------
/src/worker/index.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This shared worker is a background compaction task. Every N changes, it
 3 |  * saves a snapshot of the document. This improves load times.
 4 |  */
 5 | import { DB } from '../db'
 6 | declare const self: SharedWorkerGlobalScope;
 7 | 
 8 | const db = new DB('autowiki')
 9 | 
10 | self.addEventListener('connect', (e) => {
11 |   const port = e.ports[0]
12 |   port.onmessage = (e) => {
13 |     const {docId} = e.data
14 |     db.saveSnapshot(docId)
15 |   }
16 | })
17 | 
18 | export {}
19 | 


--------------------------------------------------------------------------------
/src/worker/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2020",
 4 |     "lib": [
 5 |       "esnext",
 6 |       "webworker"
 7 |     ],
 8 |     "allowJs": true,
 9 |     "skipLibCheck": true,
10 |     "esModuleInterop": true,
11 |     "allowSyntheticDefaultImports": true,
12 |     "strict": true,
13 |     "forceConsistentCasingInFileNames": true,
14 |     "module": "esnext",
15 |     "moduleResolution": "node",
16 |     "noFallthroughCasesInSwitch": true,
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "noEmit": true,
20 |     "jsx": "react"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2020",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "module": "esnext",
16 |     "moduleResolution": "node",
17 |     "noFallthroughCasesInSwitch": true,
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react"
22 |   },
23 |   "include": [
24 |     "src"
25 |   ],
26 |   "exclude": [
27 |     "src/worker/"
28 |   ]
29 | }
30 | 


--------------------------------------------------------------------------------