init
This commit is contained in:
commit
007685f62a
|
|
@ -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?
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["svelte.svelte-vscode"]
|
||||
}
|
||||
|
|
@ -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).
|
||||
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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),
|
||||
};
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
|
|
@ -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,
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
>
|
||||
|
|
@ -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
|
||||
/>
|
||||
|
|
@ -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;
|
||||
};
|
||||
}
|
||||
|
|
@ -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"];
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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,
|
||||
}
|
||||
|
|
@ -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}`);
|
||||
}
|
||||
|
|
@ -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();
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import './app.css'
|
||||
import App from './App.svelte'
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById('app'),
|
||||
})
|
||||
|
||||
export default app
|
||||
|
|
@ -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}
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<h1>No encontré esa página</h1>
|
||||
|
||||
<!-- TODO: llevar a index -->
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
|
|
@ -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(),
|
||||
}
|
||||
|
|
@ -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" }]
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node"
|
||||
},
|
||||
"include": ["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(),
|
||||
],
|
||||
});
|
||||
Loading…
Reference in New Issue