init

2023-03-05 17:10:29 +00:00 · 2023-03-05 17:10:29 +00:00 · 007685f62a
commit 007685f62a
41 changed files with 3247 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,5 @@
+# schreiben
+
+[WIP] Una aplicación web para escribir un mundo de cosas [knowledge base] en varios dispositivos. Sale de la frustración de que Notion funcione tan mal en Android (y iOS) y que sea software privativo en la nube.
+
+El editor (src/editor) está basado en [sutty/editor](https://0xacab.org/sutty/editor).
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Schreiben</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,42 @@
+{
+  "name": "schreiben",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^2.0.2",
+    "@tsconfig/svelte": "^3.0.0",
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
+    "prosemirror-commands": "~1.3.0",
+    "prosemirror-dropcursor": "~1.6.0",
+    "prosemirror-gapcursor": "~1.3.0",
+    "prosemirror-keymap": "~1.2.0",
+    "prosemirror-markdown": "~1.10.0",
+    "prosemirror-model": "~1.18.0",
+    "prosemirror-schema-basic": "~1.2.0",
+    "prosemirror-schema-list": "~1.2.0",
+    "prosemirror-state": "~1.4.0",
+    "prosemirror-transform": "~1.7.0",
+    "prosemirror-view": "~1.29.0",
+    "svelte": "^3.55.1",
+    "svelte-check": "^2.10.3",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
+  },
+  "dependencies": {
+    "bootstrap-icons": "^1.10.3",
+    "nanoid": "^4.0.1",
+    "navaid": "^1.2.0",
+    "y-prosemirror": "^1.2.0",
+    "y-protocols": "^1.0.5",
+    "y-webrtc": "^10.2.4",
+    "yjs": "^13.5.48"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.svelte
+++ b/src/App.svelte
@ -0,0 +1,43 @@
+<script lang="ts">
+  import { nanoid } from "nanoid";
+  import Editor from "./editor/Editor.svelte";
+
+  import { getWorldPage, getWorldY } from "./lib/doc";
+  import { currentRoute } from "./lib/routes";
+
+  let worldDescriptor: string = "";
+  let fileId: string = nanoid();
+  $: world = worldDescriptor.includes(":")
+    ? {
+        room: worldDescriptor.split(":")[0],
+        password: worldDescriptor.split(":")[1],
+      }
+    : null;
+  $: worldY = world && getWorldY(world);
+  $: doc = worldY && getWorldPage(worldY.ydoc, fileId);
+
+  function generateWorld() {
+    worldDescriptor = `${nanoid()}:${nanoid()}`;
+  }
+</script>
+
+<main>
+  <svelte:component this={$currentRoute.component} {...$currentRoute.params} />
+  <!-- <button on:click={generateWorld}>generar mundo</button>
+  <input
+    type="text"
+    bind:value={worldDescriptor}
+    placeholder="mundo descriptor"
+  />
+  <input type="text" bind:value={fileId} placeholder="world" />
+
+  {#if doc}<Editor {doc} />{/if} -->
+</main>
+
+<style>
+  main {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+</style>
--- a/src/app.css
+++ b/src/app.css
@ -0,0 +1,15 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
--- a/src/app.d.ts
+++ b/src/app.d.ts
@ -0,0 +1,26 @@
+// https://www.npmjs.com/package/@poppanator/sveltekit-svg
+declare module "*.svg" {
+  import type { ComponentType, SvelteComponentTyped } from "svelte";
+  import type { SVGAttributes } from "svelte/elements";
+
+  const content: ComponentType<
+    SvelteComponentTyped<SVGAttributes<SVGSVGElement>>
+  >;
+
+  export default content;
+}
+
+declare module "*.svg?src" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg?url" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.svg?dataurl" {
+  const content: string;
+  export default content;
+}
--- a/src/editor/BubbleMenu.svelte
+++ b/src/editor/BubbleMenu.svelte
@ -0,0 +1,163 @@
+<script lang="ts">
+  import { onMount, onDestroy, tick } from "svelte";
+  import type { EditorView } from "prosemirror-view";
+  import { EditorState, TextSelection } from "prosemirror-state";
+  import type { Node as ProsemirrorNode } from "prosemirror-model";
+  import { toggleMark } from "prosemirror-commands";
+  import type { Mark } from "prosemirror-model";
+
+  import BoldIcon from "bootstrap-icons/icons/type-bold.svg";
+  import ItalicIcon from "bootstrap-icons/icons/type-italic.svg";
+  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 CloseIcon from "bootstrap-icons/icons/x.svg";
+
+  import type { Command } from "./ps-utils";
+  import {
+    updateMark,
+    removeMark,
+    markIsActive,
+    commandListener,
+    getFirstMarkInSelection,
+  } from "./ps-utils";
+  import { refreshCoords as _refreshCoords } from "./bubblemenu/coords";
+  import SimpleMarkItem from "./bubblemenu/SimpleMarkItem.svelte";
+
+  export let view: EditorView;
+  export let state: EditorState;
+
+  // == Posicionamiento ==
+  let bubbleEl: HTMLElement = null;
+  let left: number = 0;
+  let bottom: number = 0;
+
+  function refreshCoords() {
+    const coords = _refreshCoords(view, bubbleEl);
+    left = coords.left;
+    bottom = coords.bottom;
+  }
+
+  $: {
+    // refrescar cuando cambia state
+    view;
+    state;
+    if (bubbleEl) refreshCoords();
+  }
+
+  let resizeObserver = new ResizeObserver(() => {
+    if (bubbleEl) refreshCoords();
+  });
+  $: {
+    view;
+    resizeObserver.disconnect();
+    if (bubbleEl) {
+      resizeObserver.observe(bubbleEl.parentElement);
+    }
+  }
+  onDestroy(() => resizeObserver.disconnect());
+  // == /Posicionamiento ==
+
+  let changingProp:
+    | false
+    | { type: "link"; url: string }
+    | { type: "mark" }
+    | { type: "mark-custom"; color: string } = false;
+
+  let linkInputEl: HTMLElement;
+
+  $: {
+    if (state.selection.empty) {
+      changingProp = false;
+    }
+    if (changingProp && changingProp.type === "link") {
+      tick().then(() => {
+        linkInputEl.focus();
+      });
+    } else {
+      view.focus();
+    }
+  }
+
+  function runCommand(command: Command) {
+    command(state, view.dispatch);
+  }
+
+  function startEditingLink(event: Event) {
+    const { to, from } = state.selection;
+    const match = getFirstMarkInSelection(state, view.state.schema.marks.link);
+
+    // si no hay un link en la selección, empezar a editar uno sin ningún enlace
+    // TODO: quizás queremos poner algo tipo https://sutty.nl por defecto?
+    if (!match) {
+      changingProp = { type: "link", url: "" };
+      return;
+    }
+
+    view.dispatch(
+      state.tr.setSelection(
+        TextSelection.create(
+          state.doc,
+          match.position,
+          match.position + match.node.nodeSize
+        )
+      )
+    );
+    changingProp = { type: "link", url: match.mark.attrs.href };
+  }
+
+  function removeLink() {
+    changingProp = false;
+    runCommand(removeMark(view.state.schema.marks.link));
+  }
+
+  function onChangeLink(event: Event) {
+    changingProp = false;
+    const url = (event.target as HTMLInputElement).value;
+    runCommand(updateMark(view.state.schema.marks.link, { href: url }));
+  }
+
+  const svgStyle = "width: 100%; height: 100%";
+</script>
+
+<div
+  bind:this={bubbleEl}
+  class="bubble"
+  hidden={state.selection.empty}
+  style="left: {left}px; bottom: {bottom}px"
+>
+  {#if changingProp === false}
+    <SimpleMarkItem {view} {state} type={view.state.schema.marks.strong}
+      ><BoldIcon style={svgStyle} /></SimpleMarkItem
+    >
+    <SimpleMarkItem {view} {state} type={view.state.schema.marks.em}
+      ><ItalicIcon style={svgStyle} /></SimpleMarkItem
+    >
+    <SimpleMarkItem {view} {state} type={view.state.schema.marks.underline}
+      ><UnderlineIcon style={svgStyle} /></SimpleMarkItem
+    >
+    <SimpleMarkItem {view} {state} type={view.state.schema.marks.strikethrough}
+      ><StrikethroughIcon style={svgStyle} /></SimpleMarkItem
+    >
+    <button
+      type="button"
+      class:active={markIsActive(state, view.state.schema.marks.link)}
+      on:mousedown|preventDefault={startEditingLink}
+      ><LinkIcon style={svgStyle} /></button
+    >
+  {:else if changingProp.type === "link"}
+    <input
+      bind:this={linkInputEl}
+      type="text"
+      placeholder="https://"
+      on:change|preventDefault={onChangeLink}
+      value={changingProp.url}
+    />
+    <button
+      type="button"
+      title="Borrar enlace"
+      on:mousedown|preventDefault={removeLink}
+      ><CloseIcon style={svgStyle} /></button
+    >
+  {/if}
+</div>
--- a/src/editor/Editor.svelte
+++ b/src/editor/Editor.svelte
@ -0,0 +1,81 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { keymap } from "prosemirror-keymap";
+  import { EditorState, Plugin } from "prosemirror-state";
+  import { EditorView } from "prosemirror-view";
+  import { dropCursor } from "prosemirror-dropcursor";
+  import { gapCursor } from "prosemirror-gapcursor";
+  import { DOMParser, DOMSerializer } from "prosemirror-model";
+  import type { XmlFragment } from "yjs";
+  import {
+    ySyncPlugin,
+    yCursorPlugin,
+    yUndoPlugin,
+    undo,
+    redo,
+  } from "y-prosemirror";
+
+  import "./editor.css";
+
+  import { schema } from "./schema";
+  import BubbleMenu from "./BubbleMenu.svelte";
+  import MenuBar from "./MenuBar.svelte";
+  import { placeholderPlugin } from "./upload";
+  import { baseKeymap } from "./keymap";
+
+  export let doc: XmlFragment;
+
+  let wrapperEl: HTMLElement;
+
+  function createState(doc: XmlFragment): EditorState {
+    return EditorState.create({
+      schema,
+      plugins: [
+        new Plugin({
+          view: (editorView) => {
+            // editorView.dom.parentElement?.replaceWith(editorView.dom);
+            return {
+              update(view, lastState) {
+                if (
+                  lastState &&
+                  lastState.doc.eq(view.state.doc) &&
+                  lastState.selection.eq(view.state.selection)
+                ) {
+                  return;
+                }
+                updatedState = view.state;
+              },
+            };
+          },
+        }),
+        dropCursor(),
+        gapCursor(),
+        //menubar(schema),
+        // history(),
+        ySyncPlugin(doc),
+        // yCursorPlugin(doc.webrtcProvider.awareness),
+        yUndoPlugin(),
+        keymap(baseKeymap),
+        placeholderPlugin,
+      ],
+    });
+  }
+  let state = createState(doc);
+  $: state = createState(doc);
+  let updatedState: EditorState = state;
+
+  let view: EditorView;
+  $: {
+    if (view) view.destroy();
+    view = new EditorView(wrapperEl, { state });
+  }
+</script>
+
+<div class="editor">
+  {#if view}
+    <BubbleMenu {view} state={updatedState} />
+    <MenuBar {view} state={updatedState} />
+  {/if}
+  <!-- this element gets replaced with the editor itself when mounted -->
+  <div bind:this={wrapperEl} />
+</div>
--- a/src/editor/MenuBar.svelte
+++ b/src/editor/MenuBar.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { EditorState } from "prosemirror-state";
+  import type { EditorView } from "prosemirror-view";
+
+  import BlockSelect from "./menubar/BlockSelect.svelte";
+  import AlignSelect from "./menubar/AlignSelect.svelte";
+  // import UploadItem from "./menubar/UploadItem.svelte";
+  import ListItem from "./menubar/ListItem.svelte";
+  import BlockQuoteItem from "./menubar/BlockQuoteItem.svelte";
+  import { ListKind } from "./utils";
+
+  export let view: EditorView;
+  export let state: EditorState;
+</script>
+
+<div class="menubar">
+  <BlockSelect {view} {state} />
+  <AlignSelect {view} {state} />
+  <!-- <UploadItem {view} {state} /> -->
+  <ListItem {view} {state} kind={ListKind.Unordered} />
+  <ListItem {view} {state} kind={ListKind.Ordered} />
+  <BlockQuoteItem {view} {state} />
+</div>
--- a/src/editor/bubblemenu/SimpleMarkItem.svelte
+++ b/src/editor/bubblemenu/SimpleMarkItem.svelte
@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { MarkType } from "prosemirror-model";
+  import type { EditorState } from "prosemirror-state";
+  import type { EditorView } from "prosemirror-view";
+  import { toggleMark } from "prosemirror-commands";
+
+  import { commandListener, markIsActive } from "../ps-utils";
+
+  export let view: EditorView<any>;
+  export let state: EditorState<any>;
+  export let type: MarkType;
+  export let small: boolean = false;
+
+  $: isActive = markIsActive(state, type);
+  $: listener = commandListener(view, toggleMark(type));
+</script>
+
+<button type="button" class:active={isActive} on:mousedown={listener}>
+  {#if small}
+    <small><slot /></small>
+  {:else}
+    <slot />
+  {/if}
+</button>
--- a/src/editor/bubblemenu/coords.ts
+++ b/src/editor/bubblemenu/coords.ts
@ -0,0 +1,104 @@
+import type { EditorView } from "prosemirror-view";
+
+function textRange(
+  node: Node,
+  from: number = 0,
+  to: number | null = null
+): Range {
+  const range = document.createRange();
+  range.setEnd(node, to == null ? node.nodeValue.length : to);
+  range.setStart(node, Math.max(from, 0));
+  return range;
+}
+
+function singleRect(object: Element | Range, bias: number) {
+  const rects = object.getClientRects();
+  return !rects.length
+    ? object.getBoundingClientRect()
+    : rects[bias < 0 ? 0 : rects.length - 1];
+}
+
+interface Coords {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+function coordsAtPos(
+  view: EditorView<any>,
+  pos: number,
+  end: boolean = false
+): Coords {
+  const { node, offset } = (view as any).docView.domFromPos(pos);
+  let side: "left" | "right";
+  let rect: DOMRect;
+  if (node.nodeType === 3) {
+    if (end && offset < node.nodeValue.length) {
+      rect = singleRect(textRange(node, offset - 1, offset), -1);
+      side = "right";
+    } else if (offset < node.nodeValue.length) {
+      rect = singleRect(textRange(node, offset, offset + 1), -1);
+      side = "left";
+    }
+  } else if (node.firstChild) {
+    if (offset < node.childNodes.length) {
+      const child = node.childNodes[offset];
+      rect = singleRect(child.nodeType === 3 ? textRange(child) : child, -1);
+      side = "left";
+    }
+    if ((!rect || rect.top === rect.bottom) && offset) {
+      const child = node.childNodes[offset - 1];
+      rect = singleRect(child.nodeType === 3 ? textRange(child) : child, 1);
+      side = "right";
+    }
+  } else {
+    rect = node.getBoundingClientRect();
+    side = "left";
+  }
+  const x = rect[side];
+
+  return {
+    top: rect.top,
+    bottom: rect.bottom,
+    left: x,
+    right: x,
+  };
+}
+
+export function refreshCoords(view: EditorView<any>, bubbleEl: HTMLElement) {
+  // Brutally stolen from https://github.com/ueberdosis/tiptap/blob/d2cf88fd166092d6df079cb47fe2a55520fadf80/packages/tiptap/src/Plugins/MenuBubble.js
+  const { from, to } = view.state.selection;
+
+  // These are in screen coordinates
+  // We can't use EditorView.coordsAtPos here because it can't handle linebreaks correctly
+  // See: https://github.com/ProseMirror/prosemirror-view/pull/47
+  const start = coordsAtPos(view, from);
+  const end = coordsAtPos(view, to, true);
+
+  // The box in which the tooltip is positioned, to use as base
+  const parent = bubbleEl.offsetParent;
+
+  if (!parent) {
+    console.error(
+      "Me parece que te falto importar el CSS. `import '@suttyweb/editor/dist/style.css';`"
+    );
+    // TODO: i18n
+    throw new Error(
+      "¡El editor tuvo un error! Contactar a lxs desarrolladorxs."
+    );
+  }
+
+  const box = parent.getBoundingClientRect();
+  const el = bubbleEl.getBoundingClientRect();
+
+  const _left = Math.max((start.left + end.left) / 2 - box.left, el.width / 2);
+
+  return {
+    left: Math.round(
+      _left + el.width / 2 > box.width ? box.width - el.width / 2 : _left
+    ),
+    bottom: Math.round(box.bottom - start.top),
+    top: Math.round(end.bottom - box.top),
+  };
+}
--- a/src/editor/demo.css
+++ b/src/editor/demo.css
@ -0,0 +1,22 @@
+@import "fork-awesome/css/fork-awesome.min.css";
+
+* {
+  box-sizing: border-box;
+  text-rendering: optimizeLegibility;
+}
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  margin: 1rem;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+.editor {
+  max-width: 60rem;
+  margin: 2rem auto;
+}
--- a/src/editor/editor.css
+++ b/src/editor/editor.css
@ -0,0 +1,194 @@
+@import "prosemirror-view/style/prosemirror.css";
+
+.editor {
+  position: relative;
+}
+
+.editor *::before,
+.editor *::after {
+  box-sizing: border-box;
+}
+
+/* para ver los cambios con el sobrerayado */
+::selection,
+::-moz-selection {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.editor .menubar {
+  position: sticky;
+  top: 0px;
+  z-index: 69;
+  background: white;
+  border-bottom: 1px solid #bbb;
+}
+
+.editor .menubar .separator {
+  border-right: 2px solid #bbb;
+  margin: 0 0.5rem;
+}
+
+.editor .menubar button {
+  appearance: none;
+  background: none;
+  border: none;
+  border-radius: 2px;
+  line-height: 1;
+  padding: 0.4em 0.6em;
+  margin: 0.2em;
+  transition: all 0.2s;
+}
+
+.editor .menubar button.active {
+  background: #ddd;
+}
+
+.editor .menubar button:hover {
+  background: #eee;
+}
+
+.editor .menubar button svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.editor .bubble {
+  display: flex !important;
+  position: absolute;
+  z-index: 420;
+  transform: translateX(-50%);
+  background: black;
+  color: white;
+  border-radius: 5px;
+  padding: 0rem;
+  margin-bottom: 0.5rem;
+
+  visibility: visible;
+  opacity: 1;
+
+  transition: opacity 0.2s, visibility 0.2s;
+}
+.editor .bubble[hidden] {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.editor .bubble input {
+  appearance: none;
+  background: none;
+  color: inherit;
+  border: none;
+  font-size: 1.25em;
+}
+
+.editor .bubble .separator {
+  border-right: 1px solid #777;
+  margin: 0 0.5rem;
+}
+
+.editor .bubble button {
+  appearance: none;
+  background: none;
+  color: inherit;
+  border: none;
+  border-radius: 2px;
+  padding: 0.3em;
+  margin: 0.2em;
+  width: 1.8rem;
+  height: 1.8rem;
+  font-size: 1em;
+  line-height: 1;
+
+  transition: background 0.2s;
+}
+.editor .bubble button:hover {
+  background: #333;
+}
+.editor .bubble button.active {
+  background: #555;
+}
+
+.editor .bubble .color-button {
+  padding: 0.4em;
+}
+.editor .bubble .color {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border-radius: 100%;
+}
+
+.editor .bubble p {
+  margin: 0;
+}
+
+.ProseMirror {
+  width: 100%;
+  padding: 0.5em;
+
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+.ProseMirror:focus {
+  outline: lightskyblue solid;
+}
+
+.ProseMirror img {
+  max-width: 100%;
+}
+
+.ProseMirror figure {
+  margin: 0;
+  padding: 0.5em 2em;
+}
+.ProseMirror figure figcaption::before {
+  content: "Descripción: ";
+  color: #666;
+}
+.ProseMirror .ProseMirror-multimedia-placeholder {
+  margin-bottom: 0.5em;
+}
+.ProseMirror .ProseMirror-multimedia-placeholder::before {
+  content: "Clickea aquí para subir una imágen, audio o documento.";
+  color: #666;
+}
+
+.ProseMirror blockquote {
+  background-color: #f5f5f5;
+  border-left: 5px solid #dbdbdb;
+  padding: 1.25em 1.5em;
+  margin: 0.5em;
+}
+
+.ProseMirror-menubar {
+  position: sticky;
+  top: 0px;
+  z-index: 69;
+  background: white;
+  border-bottom: 1px solid #bbb;
+}
+
+.ProseMirror-menubar-separator {
+  border-right: 2px solid #bbb;
+  margin: 0 0.5rem;
+}
+
+.ProseMirror-menubar-button {
+  appearance: none;
+  background: none;
+  border: none;
+  border-radius: 8px;
+  font-size: 1em;
+  padding: 0.4em 0.6em;
+  margin: 0.2em;
+  transition: all 0.2s;
+}
+
+.ProseMirror-menubar-button-active {
+  background: #ddd;
+}
+
+.ProseMirror-menubar-button:hover {
+  background: #eee;
+}
--- a/src/editor/global.d.ts
+++ b/src/editor/global.d.ts
@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
--- a/src/editor/keymap.ts
+++ b/src/editor/keymap.ts
@ -0,0 +1,69 @@
+// derivado de prosemirror-commands/src/commands.js
+
+import {
+  chainCommands,
+  createParagraphNear,
+  deleteSelection,
+  exitCode,
+  joinBackward,
+  joinForward,
+  liftEmptyBlock,
+  newlineInCode,
+  selectAll,
+  selectNodeBackward,
+  selectNodeForward,
+  splitBlock,
+} from "prosemirror-commands";
+import { undo, redo } from "y-prosemirror";
+import {
+  splitListItem,
+  liftListItem,
+  sinkListItem,
+} from "prosemirror-schema-list";
+
+import { schema } from "./schema";
+
+const backspace = chainCommands(
+  deleteSelection,
+  joinBackward,
+  selectNodeBackward
+);
+const del = chainCommands(deleteSelection, joinForward, selectNodeForward);
+
+const pcBaseKeymap = {
+  Enter: chainCommands(
+    newlineInCode,
+    createParagraphNear,
+    liftEmptyBlock,
+    // XXX: hack
+    splitListItem(schema.nodes.list_item as any),
+    splitBlock
+  ),
+  "Mod-Enter": chainCommands(exitCode, splitBlock),
+  Backspace: backspace,
+  "Mod-Backspace": backspace,
+  Delete: del,
+  "Mod-Delete": del,
+  "Mod-a": selectAll,
+  "Shift-Tab": liftListItem(schema.nodes.list_item),
+  Tab: sinkListItem(schema.nodes.list_item),
+};
+
+const macBaseKeymap = {
+  ...pcBaseKeymap,
+  "Ctrl-h": pcBaseKeymap["Backspace"],
+  "Alt-Backspace": pcBaseKeymap["Mod-Backspace"],
+  "Ctrl-d": pcBaseKeymap["Delete"],
+  "Ctrl-Alt-Backspace": pcBaseKeymap["Mod-Delete"],
+  "Alt-Delete": pcBaseKeymap["Mod-Delete"],
+  "Alt-d": pcBaseKeymap["Mod-Delete"],
+};
+
+const mac =
+  typeof navigator != "undefined" ? /Mac/.test(navigator.platform) : false;
+
+export const baseKeymap = {
+  ...(mac ? macBaseKeymap : pcBaseKeymap),
+  "Mod-z": undo,
+  "Mod-y": redo,
+};
--- a/src/editor/main.ts
+++ b/src/editor/main.ts
@ -0,0 +1,11 @@
+import "./demo.css";
+import Editor from "./Editor.svelte";
+
+const editor = new Editor({
+  target: document.body,
+  props: {
+    textareaEl: document.body.querySelector("textarea"),
+  },
+});
+
+export default editor;
--- a/src/editor/menubar/AlignSelect.svelte
+++ b/src/editor/menubar/AlignSelect.svelte
@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { EditorState } from "prosemirror-state";
+  import type { EditorView } from "prosemirror-view";
+  import { getAttrFn, setAlign } from "../ps-utils";
+  import type { Align } from "../schema";
+
+  export let view: EditorView;
+  export let state: EditorState;
+
+  $: isPossible = setAlign(null)(state, null);
+  $: currentValue = getAttrFn("align")(state);
+
+  const onChange = (event) => {
+    event.preventDefault();
+
+    const { value } = event.target;
+    const align: Align = value === "normal" ? null : value;
+    setAlign(align)(state, view.dispatch);
+  };
+</script>
+
+<select
+  value={currentValue === null ? "normal" : currentValue}
+  disabled={!isPossible}
+  on:change={onChange}
+>
+  <option value="normal">Normal</option>
+  <option value="center">Centro</option>
+  <option value="right">Derecha</option>
+</select>
--- a/src/editor/menubar/BlockQuoteItem.svelte
+++ b/src/editor/menubar/BlockQuoteItem.svelte
@ -0,0 +1,27 @@
+<script lang="ts">
+  import { wrapIn } from "prosemirror-commands";
+
+  import type { EditorState } from "prosemirror-state";
+  import type { EditorView } from "prosemirror-view";
+
+  import BlockquoteIcon from "bootstrap-icons/icons/blockquote-left.svg";
+
+  import { commandListener, nodeIsActiveFn } from "../ps-utils";
+
+  export let view: EditorView;
+  export let state: EditorState;
+
+  const type = state.schema.nodes.blockquote;
+
+  $: isActive = nodeIsActiveFn(type, null, true);
+  $: command = wrapIn(type);
+  $: isPossible = command(state, null);
+  $: actionListener = commandListener(view, command);
+</script>
+
+<button
+  type="button"
+  class:active={isActive(state)}
+  on:mousedown={actionListener}
+  disabled={!isPossible}><BlockquoteIcon /></button
+>
--- a/src/editor/menubar/BlockSelect.svelte
+++ b/src/editor/menubar/BlockSelect.svelte
@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { NodeType } from "prosemirror-model";
+  import type { EditorState } from "prosemirror-state";
+  import type { EditorView } from "prosemirror-view";
+  import { setBlockType } from "prosemirror-commands";
+
+  export let view: EditorView;
+  export let state: EditorState;
+
+  const paragraphType = state.schema.nodes.paragraph;
+  const headingType = state.schema.nodes.heading;
+
+  $: isPossible = setBlockType(headingType, { level: 1 })(state, null);
+  $: currentValue =
+    state.selection.to <= state.selection.$from.end() &&
+    (state.selection.$from.parent.type == headingType
+      ? `heading:${state.selection.$from.parent.attrs.level}`
+      : state.selection.$from.parent.type == paragraphType
+      ? "paragraph"
+      : null);
+
+  const onChange = (event) => {
+    event.preventDefault();
+
+    const [type, param] = event.target.value.split(":");
+    if (type === "paragraph") {
+      setBlockType(paragraphType, {
+        align: state.selection.$from.parent.attrs.align,
+      })(state, view.dispatch);
+    } else if (type === "heading") {
+      setBlockType(headingType, {
+        level: parseInt(param),
+        align: state.selection.$from.parent.attrs.align,
+      })(state, view.dispatch);
+    } else {
+      console.error(`¡type no es heading ni paragraph! Es`, type);
+    }
+  };
+</script>
+
+<select value={currentValue} on:change={onChange}>
+  <option value="paragraph">Párrafo</option>
+  <option value="heading:1">Titulo grande</option>
+  <option value="heading:2">Titulo mediano</option>
+  <option value="heading:3">Subtitulo</option>
+  <option value="heading:4">Subsubtitulo</option>
+  <option value="heading:5">Subsubsubtitulo</option>
+  <option value="heading:6">Subsubsubsubtitulo</option>
+</select>
--- a/src/editor/menubar/ListItem.svelte
+++ b/src/editor/menubar/ListItem.svelte
@ -0,0 +1,44 @@
+<script lang="ts">
+  import { chainCommands } from "prosemirror-commands";
+
+  import { wrapInList } from "prosemirror-schema-list";
+  import { liftListItem } from "prosemirror-schema-list";
+  import type { EditorState } from "prosemirror-state";
+  import type { EditorView } from "prosemirror-view";
+
+  import UlIcon from "bootstrap-icons/icons/list-ul.svg";
+  import OlIcon from "bootstrap-icons/icons/list-ol.svg";
+
+  import { ListKind } from "../utils";
+  import { commandListener, nodeIsActiveFn } from "../ps-utils";
+
+  export let view: EditorView;
+  export let state: EditorState;
+  export let kind: ListKind;
+
+  $: type =
+    kind === ListKind.Unordered
+      ? state.schema.nodes.bullet_list
+      : kind === ListKind.Ordered
+      ? state.schema.nodes.ordered_list
+      : null;
+  const listItemType = state.schema.nodes.list_item;
+  $: iconComponent =
+    kind === ListKind.Unordered
+      ? UlIcon
+      : kind === ListKind.Ordered
+      ? OlIcon
+      : (console.error("adsfadsf"), UlIcon);
+
+  $: isActive = nodeIsActiveFn(type, null, true);
+  $: command = chainCommands(liftListItem(listItemType), wrapInList(type));
+  $: isPossible = command(state, null);
+  $: actionListener = commandListener(view, command);
+</script>
+
+<button
+  type="button"
+  class:active={isActive(state)}
+  on:mousedown={actionListener}
+  disabled={!isPossible}><svelte:component this={iconComponent} /></button
+>
--- a/src/editor/menubar/UploadItem.svelte
+++ b/src/editor/menubar/UploadItem.svelte
@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { EditorState } from "prosemirror-state";
+  import type { EditorView } from "prosemirror-view";
+  import { insertPoint } from "prosemirror-transform";
+  import { uploadFile, placeholderPlugin, findPlaceholder } from "../upload";
+  import type { NodeType } from "prosemirror-model";
+  import type { MultimediaKind } from "../schema";
+
+  export let view: EditorView;
+  export let state: EditorState;
+
+  const type = state.schema.nodes.multimedia;
+  let inputEl: HTMLInputElement;
+
+  function mimeToKind(mime: string): MultimediaKind {
+    if (mime.match(/^image\/.+$/)) {
+      return "img";
+    } else if (mime.match(/^video\/.+$/)) {
+      return "video";
+    } else if (mime.match(/^audio\/.+$/)) {
+      return "audio";
+    } else if (mime.match(/^application\/pdf$/)) {
+      return "iframe";
+    } else {
+      // TODO: chequear si el archivo es válido antes de subir
+      throw new Error("Tipo de archivo no reconocido");
+    }
+  }
+
+  function startUploading() {
+    inputEl.click();
+  }
+  function upload() {
+    // TODO: permitir reemplazar el contenido de multimedia de un multimedia
+    // ya existente
+    if (
+      inputEl.files.length > 0 &&
+      state.selection.$from.parent.inlineContent
+    ) {
+      let id = {};
+      let tr = view.state.tr;
+      const point = insertPoint(state.doc, state.selection.to, type);
+      tr.setMeta(placeholderPlugin, { add: { id, pos: point } });
+      view.dispatch(tr);
+
+      const file = inputEl.files[0];
+      uploadFile(file)
+        .then((url) => {
+          const placeholderPos = findPlaceholder(view.state, id);
+          // si se borró el placeholder, no subir imágen
+          if (placeholderPos == null) return;
+
+          const node = state.schema.nodes.multimedia.createChecked(
+            {
+              src: url,
+              kind: mimeToKind(file.type),
+            },
+            [state.schema.nodes.multimedia_caption.createChecked({})]
+          );
+
+          view.dispatch(
+            view.state.tr
+              .replaceWith(placeholderPos, placeholderPos, node)
+              .setMeta(placeholderPlugin, { remove: { id } })
+          );
+        })
+        .catch((err) => {
+          console.error(err);
+          // TODO: mostrar error
+          alert(err);
+          view.dispatch(tr.setMeta(placeholderPlugin, { remove: { id } }));
+        });
+    }
+    view.focus();
+  }
+</script>
+
+<button type="button" on:mousedown|preventDefault={startUploading}
+  ><i class={`fa fa-upload`} /></button
+>
+<input
+  type="file"
+  bind:this={inputEl}
+  on:change|preventDefault={upload}
+  hidden
+/>
--- a/src/editor/ps-utils.ts
+++ b/src/editor/ps-utils.ts
@ -0,0 +1,237 @@
+import { chainCommands, setBlockType } from "prosemirror-commands";
+import type {
+  Mark,
+  MarkType,
+  NodeType,
+  ResolvedPos,
+  Node as ProsemirrorNode,
+} from "prosemirror-model";
+import type { EditorState, Selection } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
+
+import type { Align } from "./schema";
+
+export type Command = (
+  state: EditorState<any>,
+  dispatch?: EditorView<any>["dispatch"]
+) => boolean;
+
+// A lot of this is from https://github.com/ueberdosis/tiptap/blob/main/packages/tiptap-commands
+
+export function getMarkRange(
+  $pos: ResolvedPos | null = null,
+  type: MarkType | null = null
+) {
+  if (!$pos || !type) {
+    return false;
+  }
+
+  const start = $pos.parent.childAfter($pos.parentOffset);
+
+  if (!start.node) {
+    return false;
+  }
+
+  const link = start.node.marks.find((mark) => mark.type === type);
+  if (!link) {
+    return false;
+  }
+
+  let startIndex = $pos.index();
+  let startPos = $pos.start() + start.offset;
+  let endIndex = startIndex + 1;
+  let endPos = startPos + start.node.nodeSize;
+
+  while (
+    startIndex > 0 &&
+    link.isInSet($pos.parent.child(startIndex - 1).marks)
+  ) {
+    startIndex -= 1;
+    startPos -= $pos.parent.child(startIndex).nodeSize;
+  }
+
+  while (
+    endIndex < $pos.parent.childCount &&
+    link.isInSet($pos.parent.child(endIndex).marks)
+  ) {
+    endPos += $pos.parent.child(endIndex).nodeSize;
+    endIndex += 1;
+  }
+
+  return { from: startPos, to: endPos };
+}
+
+export function updateMark(type: MarkType, attrs: any): Command {
+  return (state, dispatch) => {
+    const { tr, selection, doc } = state;
+
+    const { ranges, empty } = selection;
+
+    if (empty) {
+      const range = getMarkRange(selection.$from, type);
+      if (!range) throw new Error("What the fuck");
+      const { from, to } = range;
+
+      if (doc.rangeHasMark(from, to, type)) {
+        tr.removeMark(from, to, type);
+      }
+
+      tr.addMark(from, to, type.create(attrs));
+    } else {
+      ranges.forEach((ref$1) => {
+        const { $to, $from } = ref$1;
+
+        if (doc.rangeHasMark($from.pos, $to.pos, type)) {
+          tr.removeMark($from.pos, $to.pos, type);
+        }
+
+        tr.addMark($from.pos, $to.pos, type.create(attrs));
+      });
+    }
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}
+
+export function removeMark(type: MarkType): Command {
+  return (state, dispatch) => {
+    const { tr, selection } = state;
+    let { from, to } = selection;
+    const { $from, empty } = selection;
+
+    if (empty) {
+      const range = getMarkRange($from, type);
+      if (!range) throw new Error("No");
+
+      from = range.from;
+      to = range.to;
+    }
+
+    tr.removeMark(from, to, type);
+
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}
+
+export function toggleNode(
+  type: NodeType<any>,
+  attrs: any,
+  /// es el tipo que se setea si ya es el type querido; probablemente querés
+  /// que sea el type de párrafo
+  alternateType: NodeType<any>
+): Command {
+  return chainCommands(setBlockType(type, attrs), setBlockType(alternateType));
+}
+
+export function commandListener(
+  view: EditorView<any>,
+  command: Command
+): (event: Event) => void {
+  return (event) => {
+    event.preventDefault();
+    command(view.state, view.dispatch);
+  };
+}
+
+export default function findParentNodeClosestToPos(
+  $pos: ResolvedPos,
+  predicate: (node: ProsemirrorNode<any>) => boolean
+) {
+  for (let i = $pos.depth; i > 0; i -= 1) {
+    const node = $pos.node(i);
+
+    if (predicate(node)) {
+      return {
+        pos: i > 0 ? $pos.before(i) : 0,
+        start: $pos.start(i),
+        depth: i,
+        node,
+      };
+    }
+  }
+}
+
+export function nodeIsActiveFn(
+  type: NodeType<any>,
+  attrs?: any,
+  checkParents: boolean = false
+): (state: EditorState) => boolean {
+  return (state) => {
+    let { $from, to } = state.selection;
+    return (
+      to <= $from.end() &&
+      (checkParents
+        ? !!findParentNodeClosestToPos($from, (n) => n.type == type)
+        : $from.parent.hasMarkup(type, attrs))
+    );
+  };
+}
+export function getAttrFn(attrKey: string): (state: EditorState) => any {
+  return (state) => {
+    let { from, to } = state.selection;
+    let value: any = undefined;
+    state.doc.nodesBetween(from, to, (node, pos) => {
+      if (value !== undefined) return false;
+      if (!node.isTextblock) return;
+      if (attrKey in node.attrs) value = node.attrs[attrKey];
+    });
+    return value;
+  };
+}
+
+export function markIsActive(state: EditorState, type: MarkType<any>): boolean {
+  let { from, to } = state.selection;
+  return state.doc.rangeHasMark(from, to, type);
+}
+
+export interface MarkMatch {
+  node: ProsemirrorNode<any>;
+  position: number;
+  mark: Mark;
+}
+
+export function getFirstMarkInSelection(
+  state: EditorState,
+  type: MarkType<any>
+): MarkMatch {
+  const { to, from } = state.selection;
+
+  let match: MarkMatch;
+  state.selection.$from.doc.nodesBetween(from, to, (node, position) => {
+    if (!match) {
+      const mark = type.isInSet(node.marks);
+      if (!mark) return;
+      match = { node, position, mark };
+    }
+  });
+
+  return match;
+}
+
+export function setAlign(align: Align): Command {
+  return (state, dispatch) => {
+    let { from, to } = state.selection;
+    let node: ProsemirrorNode<any> | null = null;
+    state.doc.nodesBetween(from, to, (_node, pos) => {
+      if (node) return false;
+      if (!_node.isTextblock) return;
+      if (
+        _node.type == state.schema.nodes.paragraph ||
+        _node.type == state.schema.nodes.heading
+      ) {
+        node = _node;
+      }
+    });
+    if (!node) return false;
+    if (dispatch)
+      return setBlockType(node.type, { ...node.attrs, align })(state, dispatch);
+
+    return true;
+  };
+}
--- a/src/editor/schema.ts
+++ b/src/editor/schema.ts
@ -0,0 +1,326 @@
+import { Schema } from "prosemirror-model";
+
+const hex = (x: string) => ("0" + parseInt(x).toString(16)).slice(-2);
+// https://stackoverflow.com/a/3627747
+// TODO: cambiar por una solución más copada
+function rgbToHex(rgb: string): string {
+  const matches = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+  if (!matches) throw new Error("no pude parsear el rgb()");
+  return "#" + hex(matches[1]) + hex(matches[2]) + hex(matches[3]);
+}
+
+export type Align = null | "center" | "right";
+
+export type MultimediaKind = "img" | "video" | "audio" | "iframe";
+
+function getAlign(node: HTMLElement): Align | null {
+  let align = node.style.textAlign || node.getAttribute("data-align");
+  if (align !== "center" && align !== "right") return null;
+  return align;
+}
+
+function getHeadingAttrs(
+  level: number
+): (n: Node) => { [key: string]: string } {
+  return (n) => ({ level, align: getAlign(n as HTMLElement) });
+}
+
+export const schema = new Schema({
+  nodes: {
+    doc: {
+      content: "block+",
+    },
+
+    paragraph: {
+      content: "inline*",
+      group: "block",
+      attrs: { align: { default: null } },
+      parseDOM: [
+        {
+          tag: "p",
+          getAttrs(n) {
+            return { align: getAlign(n as HTMLElement) };
+          },
+        },
+      ],
+      toDOM(node) {
+        return ["p", { style: `text-align: ${node.attrs.align}` }, 0];
+      },
+    },
+
+    blockquote: {
+      content: "block+",
+      group: "block",
+      parseDOM: [{ tag: "blockquote" }],
+      toDOM() {
+        return ["blockquote", 0];
+      },
+    },
+
+    horizontal_rule: {
+      group: "block",
+      parseDOM: [{ tag: "hr" }],
+      toDOM() {
+        return ["div", ["hr"]];
+      },
+    },
+
+    heading: {
+      attrs: { level: { default: 1 }, align: { default: null } },
+      content: "text*",
+      group: "block",
+      defining: true,
+      parseDOM: [
+        { tag: "h1", getAttrs: getHeadingAttrs(1) },
+        { tag: "h2", getAttrs: getHeadingAttrs(2) },
+        { tag: "h3", getAttrs: getHeadingAttrs(3) },
+        { tag: "h4", getAttrs: getHeadingAttrs(4) },
+        { tag: "h5", getAttrs: getHeadingAttrs(5) },
+        { tag: "h6", getAttrs: getHeadingAttrs(6) },
+      ],
+      toDOM(node) {
+        return [
+          "h" + node.attrs.level,
+          { style: `text-align: ${node.attrs.align}` },
+          0,
+        ];
+      },
+    },
+
+    code_block: {
+      content: "text*",
+      group: "block",
+      code: true,
+      defining: true,
+      marks: "",
+      attrs: { params: { default: "" } },
+      parseDOM: [
+        {
+          tag: "pre",
+          preserveWhitespace: "full",
+          getAttrs: (node) => ({
+            params: (node as Element).getAttribute("data-params") || "",
+          }),
+        },
+      ],
+      toDOM(node) {
+        return [
+          "pre",
+          node.attrs.params ? { "data-params": node.attrs.params } : {},
+          ["code", 0],
+        ];
+      },
+    },
+
+    ordered_list: {
+      content: "list_item+",
+      group: "block",
+      attrs: { order: { default: 1 } },
+      parseDOM: [
+        {
+          tag: "ol",
+          getAttrs(dom: Element) {
+            return {
+              order: dom.hasAttribute("start") ? +dom.getAttribute("start") : 1,
+            };
+          },
+        },
+      ],
+      toDOM(node) {
+        return node.attrs.order == 1
+          ? ["ol", 0]
+          : ["ol", { start: node.attrs.order }, 0];
+      },
+    },
+    bullet_list: {
+      content: "list_item+",
+      group: "block",
+      parseDOM: [{ tag: "ul" }],
+      toDOM: () => ["ul", 0],
+    },
+
+    list_item: {
+      content: "paragraph block*",
+      defining: true,
+      parseDOM: [{ tag: "li" }],
+      toDOM() {
+        return ["li", 0];
+      },
+    },
+
+    text: {
+      group: "inline",
+    },
+
+    multimedia: {
+      group: "block",
+      attrs: { src: {}, kind: {} },
+      content: "text*",
+      parseDOM: [
+        {
+          tag: "figure",
+          getAttrs(dom) {
+            const child: HTMLElement =
+              (dom as Element).querySelector("img") ||
+              (dom as Element).querySelector("video") ||
+              (dom as Element).querySelector("audio") ||
+              (dom as Element).querySelector("iframe");
+
+            if (child instanceof HTMLImageElement) {
+              return { src: child.src, kind: "img" };
+            } else if (child instanceof HTMLVideoElement) {
+              return { src: child.src, kind: "video" };
+            } else if (child instanceof HTMLAudioElement) {
+              return { src: child.src, kind: "audio" };
+            } else if (child instanceof HTMLIFrameElement) {
+              return { src: child.src, kind: "iframe" };
+            }
+          },
+        },
+        {
+          tag: "img",
+          getAttrs(dom) {
+            return { src: (dom as HTMLImageElement).src, kind: "img" };
+          },
+        },
+        {
+          tag: "video",
+          getAttrs(dom) {
+            return { src: (dom as HTMLVideoElement).src, kind: "video" };
+          },
+        },
+        {
+          tag: "audio",
+          getAttrs(dom) {
+            return { src: (dom as HTMLAudioElement).src, kind: "audio" };
+          },
+        },
+        {
+          tag: "iframe",
+          getAttrs(dom) {
+            return { src: (dom as HTMLIFrameElement).src, kind: "iframe" };
+          },
+        },
+      ],
+      toDOM(node) {
+        return [
+          "figure",
+          [node.attrs.kind, { src: node.attrs.src }],
+          ["figcaption", 0],
+        ];
+      },
+      draggable: true,
+    },
+
+    hard_break: {
+      inline: true,
+      group: "inline",
+      selectable: false,
+      parseDOM: [{ tag: "br" }],
+      toDOM() {
+        return ["br"];
+      },
+    },
+  },
+
+  marks: {
+    em: {
+      parseDOM: [
+        { tag: "i" },
+        { tag: "em" },
+        { style: "font-style", getAttrs: (value) => value == "italic" && null },
+      ],
+      toDOM() {
+        return ["em"];
+      },
+    },
+
+    strong: {
+      parseDOM: [
+        { tag: "b" },
+        { tag: "strong" },
+        {
+          style: "font-weight",
+          getAttrs: (value) =>
+            /^(bold(er)?|[5-9]\d{2,})$/.test(value as string) && null,
+        },
+      ],
+      toDOM() {
+        return ["strong"];
+      },
+    },
+
+    underline: {
+      parseDOM: [{ tag: "u" }],
+      toDOM() {
+        return ["u"];
+      },
+    },
+    strikethrough: {
+      parseDOM: [{ tag: "del" }],
+      toDOM() {
+        return ["del"];
+      },
+    },
+    small: {
+      parseDOM: [{ tag: "small" }],
+      toDOM() {
+        return ["small"];
+      },
+    },
+
+    mark: {
+      attrs: {
+        color: { default: "#f206f9" },
+      },
+      parseDOM: [
+        {
+          tag: "mark",
+          getAttrs(dom) {
+            const prop = (dom as HTMLElement).style.backgroundColor;
+            const hex = rgbToHex(prop);
+            return {
+              color: hex,
+            };
+          },
+        },
+      ],
+      toDOM(node) {
+        return ["mark", { style: `background-color:${node.attrs.color}` }];
+      },
+    },
+
+    link: {
+      attrs: {
+        href: {},
+      },
+      inclusive: false,
+      parseDOM: [
+        {
+          tag: "a[href]",
+          getAttrs(dom) {
+            return {
+              href: (dom as Element).getAttribute("href"),
+            };
+          },
+        },
+      ],
+      toDOM(node) {
+        const attrs = {
+          ...node.attrs,
+          rel: "noopener",
+          referrerpolicy: "strict-origin-when-cross-origin",
+        };
+
+        return ["a", attrs];
+      },
+    },
+
+    code: {
+      parseDOM: [{ tag: "code" }],
+      toDOM() {
+        return ["code"];
+      },
+    },
+  },
+});
--- a/src/editor/upload.ts
+++ b/src/editor/upload.ts
@ -0,0 +1,48 @@
+import { EditorState, Plugin } from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { h } from "./utils";
+
+export function uploadFile(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    reject("TODO: implementar subidas");
+  });
+}
+
+export const placeholderPlugin = new Plugin({
+  state: {
+    init(): DecorationSet {
+      return DecorationSet.empty;
+    },
+    apply(tr, set: DecorationSet) {
+      // Adjust decoration positions to changes made by the transaction
+      set = set.map(tr.mapping, tr.doc);
+      // See if the transaction adds or removes any placeholders
+      let action = tr.getMeta(this);
+      if (action && action.add) {
+        let widgetEl = h("div", { class: "ProseMirror-placeholder" }, [
+          "Subiendo archivo...",
+        ]);
+        let deco = Decoration.widget(action.add.pos, widgetEl, {
+          id: action.add.id,
+        });
+        set = set.add(tr.doc, [deco]);
+      } else if (action && action.remove) {
+        set = set.remove(
+          set.find(undefined, undefined, (spec) => spec.id == action.remove.id)
+        );
+      }
+      return set;
+    },
+  },
+  props: {
+    decorations(state) {
+      return this.getState(state);
+    },
+  },
+});
+
+export function findPlaceholder(state: EditorState, id: any): number | null {
+  const decos: DecorationSet = placeholderPlugin.getState(state);
+  const found = decos.find(undefined, undefined, (spec) => spec.id == id);
+  return found.length ? found[0].from : null;
+}
--- a/src/editor/utils.ts
+++ b/src/editor/utils.ts
@ -0,0 +1,49 @@
+interface Props {
+  dataset?: { [key: string]: string };
+  attributes?: { [key: string]: string };
+  contenteditable?: "true" | "false";
+  class?: string;
+  on?: { [key: string]: EventListener };
+}
+
+export function h(
+  tagName: string,
+  props: Props,
+  children: (Node | string | undefined)[]
+): HTMLElement {
+  const el = document.createElement(tagName);
+  if (props.class) {
+    el.setAttribute("class", props.class);
+  }
+  if (props.dataset) {
+    for (const [key, value] of Object.entries(props.dataset)) {
+      el.dataset[key] = value;
+    }
+  }
+  if (props.contenteditable) {
+    el.contentEditable = props.contenteditable;
+  }
+  if (props.attributes) {
+    for (const [key, value] of Object.entries(props.attributes)) {
+      el.setAttribute(key, value);
+    }
+  }
+  if (props.on) {
+    for (const [key, value] of Object.entries(props.on)) {
+      el.addEventListener(key, value);
+    }
+  }
+  for (const node of children) {
+    if (typeof node === "string") {
+      el.appendChild(document.createTextNode(node));
+    } else if (node) {
+      el.appendChild(node);
+    }
+  }
+  return el;
+}
+
+export enum ListKind {
+  Unordered,
+  Ordered,
+}
--- a/src/lib/doc.ts
+++ b/src/lib/doc.ts
@ -0,0 +1,37 @@
+import * as Y from "yjs";
+import { WebrtcProvider } from "y-webrtc";
+import { nanoid } from "nanoid";
+
+export type WorldIdentifier = {
+  room: string;
+  password: string;
+};
+
+export type WorldY = {
+  ydoc: Y.Doc;
+  webrtcProvider: WebrtcProvider;
+};
+
+export function generateNewWorld(): WorldIdentifier {
+  return {
+    room: nanoid(),
+    password: nanoid(),
+  };
+}
+
+export function getWorldY(world: WorldIdentifier): WorldY {
+  const ydoc = new Y.Doc();
+  const provider = new WebrtcProvider(world.room, ydoc, {
+    password: world.password,
+    signaling: [
+      "wss://signaling.yjs.dev",
+      "wss://y-webrtc-signaling-eu.herokuapp.com",
+      "wss://y-webrtc-signaling-us.herokuapp.com",
+    ],
+  });
+  return { ydoc, webrtcProvider: provider };
+}
+
+export function getWorldPage(ydoc: Y.Doc, pageId: string): Y.XmlFragment {
+  return ydoc.getXmlFragment(`doc/${pageId}`);
+}
--- a/src/lib/routes.ts
+++ b/src/lib/routes.ts
@ -0,0 +1,34 @@
+import navaid from "navaid";
+import { writable } from "svelte/store";
+
+import ChooseWorld from "../views/ChooseWorld.svelte";
+import CreateWorld from "../views/CreateWorld.svelte";
+import NotFound from "../views/NotFound.svelte";
+import Page from "../views/Page.svelte";
+
+export let router = navaid("/", () =>
+  currentRoute.set({ component: NotFound })
+);
+export let currentRoute = writable<{
+  // XXX: in lack of a better type for Svelte components
+  component: any;
+  params?: Record<string, string>;
+}>({ component: ChooseWorld });
+
+export const routes = {
+  ChooseWorld: "/",
+  CreateWorld: "/create",
+  Page: "/w/:worldId/:pageId",
+};
+
+router.on(routes.ChooseWorld, () =>
+  currentRoute.set({ component: ChooseWorld })
+);
+router.on(routes.CreateWorld, () =>
+  currentRoute.set({ component: CreateWorld })
+);
+router.on(routes.Page, (params) =>
+  currentRoute.set({ component: Page, params })
+);
+
+router.listen();
--- a/src/lib/worldStorage.ts
+++ b/src/lib/worldStorage.ts
@ -0,0 +1,18 @@
+import type { WorldIdentifier } from "./doc";
+
+const localStorageKey = "schreiben-worlds";
+
+export function loadWorlds(): Promise<WorldIdentifier[]> {
+  let json = localStorage.getItem(localStorageKey);
+  if (!json) json = "[]";
+  return Promise.resolve(JSON.parse(json));
+}
+
+export async function writeWorlds(
+  callback: (worlds: WorldIdentifier[]) => WorldIdentifier[]
+): Promise<WorldIdentifier[]> {
+  const oldWorlds = await loadWorlds();
+  const newWorlds = callback(oldWorlds);
+  localStorage.setItem(localStorageKey, JSON.stringify(newWorlds));
+  return newWorlds;
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,8 @@
+import './app.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+export default app
--- a/src/views/ChooseWorld.svelte
+++ b/src/views/ChooseWorld.svelte
@ -0,0 +1,25 @@
+<script lang="ts">
+  import { loadWorlds } from "../lib/worldStorage";
+  import { routes } from "../lib/routes";
+
+  const worldsPromise = loadWorlds();
+</script>
+
+<h1>Buen día.</h1>
+<h3>Elegí un mundo.</h3>
+
+{#await worldsPromise then worlds}
+  <ul>
+    {#each worlds as world}
+      <li>
+        <a
+          href={routes.Page.replace(":worldId", world.room).replace(
+            ":pageId",
+            "index"
+          )}>{world.room}</a
+        >
+      </li>
+    {/each}
+    <li><a href={routes.CreateWorld}>Crear mundo</a></li>
+  </ul>
+{/await}
--- a/src/views/CreateWorld.svelte
+++ b/src/views/CreateWorld.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+  import { generateNewWorld } from "../lib/doc";
+  import { router, routes } from "../lib/routes";
+  import { writeWorlds } from "../lib/worldStorage";
+
+  function crear(
+    event: Event & { readonly submitter: HTMLElement } & {
+      currentTarget: EventTarget & HTMLFormElement;
+    }
+  ) {
+    event.preventDefault();
+    writeWorlds((worlds) => [...worlds, generateNewWorld()]);
+    router.run(routes.ChooseWorld);
+  }
+</script>
+
+<form on:submit={crear}>
+  <button>Crear mundo</button>
+</form>
--- a/src/views/NotFound.svelte
+++ b/src/views/NotFound.svelte
@ -0,0 +1,3 @@
+<h1>No encontré esa página</h1>
+
+<!-- TODO: llevar a index -->
--- a/src/views/Page.svelte
+++ b/src/views/Page.svelte
@ -0,0 +1,45 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import type { XmlFragment } from "yjs";
+  import Editor from "../editor/Editor.svelte";
+  import { getWorldPage, getWorldY, type WorldY } from "../lib/doc";
+  import { routes } from "../lib/routes";
+  import { loadWorlds } from "../lib/worldStorage";
+
+  export let worldId: string;
+  export let pageId: string;
+
+  async function loadDoc(
+    worldId: string,
+    pageId: string
+  ): Promise<{ worldY: WorldY; doc: XmlFragment }> {
+    const worlds = await loadWorlds();
+    const worldIdentifier = worlds.find((w) => w.room === worldId);
+    if (!worldIdentifier) {
+      throw new Error("No conozco ese mundo.");
+    }
+    const worldY = getWorldY(worldIdentifier);
+    return { worldY, doc: getWorldPage(worldY.ydoc, pageId) };
+  }
+
+  $: 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} />
+{:catch error}
+  {error}
+  <a href={routes.ChooseWorld}>Volver al inicio</a>
+{/await}
+
+<style>
+  .no-color {
+    color: inherit;
+  }
+</style>
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,26 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import svg from "@poppanator/sveltekit-svg";
+import basicSsl from "@vitejs/plugin-basic-ssl";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    svelte(),
+    svg({
+      svgoOptions: {
+        multipass: true,
+        plugins: [
+          {
+            name: "preset-default",
+            // by default svgo removes the viewBox which prevents svg icons from scaling
+            // not a good idea! https://github.com/svg/svgo/pull/1461
+            params: { overrides: { removeViewBox: false } },
+          },
+        ],
+      },
+    }),
+    // lo necesitamos para crypto.subtle para nanoid
+    basicSsl(),
+  ],
+});