breaking change: usar page/ en vez de doc/ para page ids

fixes #2

package.json

@@ -34,6 +34,7 @@
     "bootstrap-icons": "^1.10.3",
     "nanoid": "^4.0.1",
     "navaid": "^1.2.0",
+    "regexparam": "^2.0.1",
     "y-prosemirror": "^1.2.0",
     "y-protocols": "^1.0.5",
     "y-webrtc": "^10.2.4",

pnpm-lock.yaml

@@ -18,6 +18,7 @@ specifiers:
   prosemirror-state: ~1.4.0
   prosemirror-transform: ~1.7.0
   prosemirror-view: ~1.29.0
+  regexparam: ^2.0.1
   svelte: ^3.55.1
   svelte-check: ^2.10.3
   tslib: ^2.5.0
@@ -32,6 +33,7 @@ dependencies:
   bootstrap-icons: 1.10.3
   nanoid: 4.0.1
   navaid: 1.2.0
+  regexparam: 2.0.1
   y-prosemirror: 1.2.0_vhy2hiocjqydif5dwvxgfnpihi
   y-protocols: 1.0.5
   y-webrtc: 10.2.4
@@ -882,6 +884,11 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /regexparam/2.0.1:
+    resolution: {integrity: sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw==}
+    engines: {node: '>=8'}
+    dev: false
+
   /resolve-from/4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}

src/editor/BubbleMenu.svelte

@@ -11,6 +11,7 @@
   import UnderlineIcon from "bootstrap-icons/icons/type-underline.svg";
   import StrikethroughIcon from "bootstrap-icons/icons/type-strikethrough.svg";
   import LinkIcon from "bootstrap-icons/icons/box-arrow-up-right.svg";
+  import InternalLinkIcon from "bootstrap-icons/icons/folder-symlink.svg";
   import CloseIcon from "bootstrap-icons/icons/x.svg";
 
   import type { Command } from "./ps-utils";
@@ -23,6 +24,7 @@
   } from "./ps-utils";
   import { refreshCoords as _refreshCoords } from "./bubblemenu/coords";
   import SimpleMarkItem from "./bubblemenu/SimpleMarkItem.svelte";
+  import { nanoid } from "nanoid";
 
   export let view: EditorView;
   export let state: EditorState;
@@ -117,6 +119,13 @@
     runCommand(updateMark(view.state.schema.marks.link, { href: url }));
   }
 
+  function createInternalLink() {
+    const pageId = nanoid();
+    runCommand(
+      updateMark(view.state.schema.marks.internal_link, { id: pageId })
+    );
+  }
+
   const svgStyle = "width: 100%; height: 100%";
 </script>
 
@@ -145,6 +154,12 @@
       on:mousedown|preventDefault={startEditingLink}
       ><LinkIcon style={svgStyle} /></button
     >
+    <button
+      type="button"
+      class:active={markIsActive(state, view.state.schema.marks.internal_link)}
+      on:mousedown|preventDefault={createInternalLink}
+      ><InternalLinkIcon style={svgStyle} /></button
+    >
   {:else if changingProp.type === "link"}
     <input
       bind:this={linkInputEl}

src/editor/Editor.svelte

@@ -22,8 +22,10 @@
   import MenuBar from "./MenuBar.svelte";
   import { placeholderPlugin } from "./upload";
   import { baseKeymap } from "./keymap";
+  import type { WorldY } from "../lib/doc";
 
   export let doc: XmlFragment;
+  export let worldY: WorldY;
 
   let wrapperEl: HTMLElement;
 

src/editor/bubblemenu/SimpleMarkItem.svelte

@@ -6,8 +6,8 @@
 
   import { commandListener, markIsActive } from "../ps-utils";
 
-  export let view: EditorView<any>;
-  export let state: EditorState<any>;
+  export let view: EditorView;
+  export let state: EditorState;
   export let type: MarkType;
   export let small: boolean = false;
 

src/editor/schema.ts

@@ -1,4 +1,6 @@
 import { Schema } from "prosemirror-model";
+import { parse, inject } from "regexparam";
+import { routes } from "../lib/routes";
 
 const hex = (x: string) => ("0" + parseInt(x).toString(16)).slice(-2);
 // https://stackoverflow.com/a/3627747
@@ -315,6 +317,36 @@ export const schema = new Schema({
         return ["a", attrs];
       },
     },
+    internal_link: {
+      attrs: {
+        id: {},
+      },
+      inclusive: false,
+      parseDOM: [
+        {
+          tag: "a[href]",
+          // TODO: untested
+          getAttrs(dom) {
+            dom = dom as HTMLElement;
+            const href = dom.getAttribute("href");
+            if (href.startsWith("/w/")) {
+              return {
+                id: parse(routes.Page).pattern.exec(href)[1],
+              };
+            } else return false;
+          },
+        },
+      ],
+      toDOM(node) {
+        return [
+          "a",
+          {
+            href: node.attrs.id,
+            //inject(routes.Page, {world:})
+          },
+        ];
+      },
+    },
 
     code: {
       parseDOM: [{ tag: "code" }],

src/lib/doc.ts

@@ -19,7 +19,12 @@ export function generateNewWorld(): WorldIdentifier {
   };
 }
 
+// when creating a webrtc provider for a second time in the same room, it freaks out.
+// cache the previous doc and return that instead
+let worldYCache: { [key: string]: WorldY } = {};
+
 export function getWorldY(world: WorldIdentifier): WorldY {
+  if (worldYCache[world.room]) return worldYCache[world.room];
   const ydoc = new Y.Doc();
   const provider = new WebrtcProvider(world.room, ydoc, {
     password: world.password,
@@ -29,9 +34,11 @@ export function getWorldY(world: WorldIdentifier): WorldY {
       "wss://y-webrtc-signaling-us.herokuapp.com",
     ],
   });
-  return { ydoc, webrtcProvider: provider };
+  const worldY = { ydoc, webrtcProvider: provider };
+  worldYCache[world.room] = worldY;
+  return worldY;
 }
 
 export function getWorldPage(ydoc: Y.Doc, pageId: string): Y.XmlFragment {
-  return ydoc.getXmlFragment(`doc/${pageId}`);
+  return ydoc.getXmlFragment(`page/${pageId}`);
 }

src/views/Page.svelte

@@ -23,16 +23,11 @@
   }
 
   $: docPromise = loadDoc(worldId, pageId);
-
-  onDestroy(async () => {
-    const doc = await docPromise;
-    doc.worldY.webrtcProvider.destroy();
-  });
 </script>
 
 <a class="no-color" href={routes.ChooseWorld}>🠔 Elegir otro mundo</a>
 {#await docPromise then doc}
-  <Editor doc={doc.doc} />
+  <Editor doc={doc.doc} worldY={doc.worldY} />
 {:catch error}
   {error}
   <a href={routes.ChooseWorld}>Volver al inicio</a>