links internos

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/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" }],