limpiar cosas

This commit is contained in:
Cat /dev/Nulo 2023-03-05 22:21:59 +00:00
parent 048022c5b0
commit a86c19bf06
7 changed files with 24 additions and 60 deletions

View file

@ -10,6 +10,12 @@
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
*,
*::before,
*::after {
box-sizing: border-box;
}
body { body {
margin: 0; margin: 0;
} }

View file

@ -1,19 +1,11 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from "svelte";
import { keymap } from "prosemirror-keymap"; import { keymap } from "prosemirror-keymap";
import { EditorState, Plugin } from "prosemirror-state"; import { EditorState, Plugin } from "prosemirror-state";
import { EditorView } from "prosemirror-view"; import { EditorView } from "prosemirror-view";
import { dropCursor } from "prosemirror-dropcursor"; import { dropCursor } from "prosemirror-dropcursor";
import { gapCursor } from "prosemirror-gapcursor"; import { gapCursor } from "prosemirror-gapcursor";
import { DOMParser, DOMSerializer } from "prosemirror-model";
import type { XmlFragment } from "yjs"; import type { XmlFragment } from "yjs";
import { import { ySyncPlugin, yCursorPlugin, yUndoPlugin } from "y-prosemirror";
ySyncPlugin,
yCursorPlugin,
yUndoPlugin,
undo,
redo,
} from "y-prosemirror";
import "./editor.css"; import "./editor.css";

View file

@ -26,7 +26,7 @@ interface Coords {
} }
function coordsAtPos( function coordsAtPos(
view: EditorView<any>, view: EditorView,
pos: number, pos: number,
end: boolean = false end: boolean = false
): Coords { ): Coords {
@ -66,7 +66,7 @@ function coordsAtPos(
}; };
} }
export function refreshCoords(view: EditorView<any>, bubbleEl: HTMLElement) { export function refreshCoords(view: EditorView, bubbleEl: HTMLElement) {
// Brutally stolen from https://github.com/ueberdosis/tiptap/blob/d2cf88fd166092d6df079cb47fe2a55520fadf80/packages/tiptap/src/Plugins/MenuBubble.js // Brutally stolen from https://github.com/ueberdosis/tiptap/blob/d2cf88fd166092d6df079cb47fe2a55520fadf80/packages/tiptap/src/Plugins/MenuBubble.js
const { from, to } = view.state.selection; const { from, to } = view.state.selection;

View file

@ -1,22 +0,0 @@
@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;
}

View file

@ -1,11 +0,0 @@
import "./demo.css";
import Editor from "./Editor.svelte";
const editor = new Editor({
target: document.body,
props: {
textareaEl: document.body.querySelector("textarea"),
},
});
export default editor;

View file

@ -12,8 +12,8 @@ import type { EditorView } from "prosemirror-view";
import type { Align } from "./schema"; import type { Align } from "./schema";
export type Command = ( export type Command = (
state: EditorState<any>, state: EditorState,
dispatch?: EditorView<any>["dispatch"] dispatch?: EditorView["dispatch"]
) => boolean; ) => boolean;
// A lot of this is from https://github.com/ueberdosis/tiptap/blob/main/packages/tiptap-commands // A lot of this is from https://github.com/ueberdosis/tiptap/blob/main/packages/tiptap-commands
@ -120,17 +120,17 @@ export function removeMark(type: MarkType): Command {
} }
export function toggleNode( export function toggleNode(
type: NodeType<any>, type: NodeType,
attrs: any, attrs: any,
/// es el tipo que se setea si ya es el type querido; probablemente querés /// es el tipo que se setea si ya es el type querido; probablemente querés
/// que sea el type de párrafo /// que sea el type de párrafo
alternateType: NodeType<any> alternateType: NodeType
): Command { ): Command {
return chainCommands(setBlockType(type, attrs), setBlockType(alternateType)); return chainCommands(setBlockType(type, attrs), setBlockType(alternateType));
} }
export function commandListener( export function commandListener(
view: EditorView<any>, view: EditorView,
command: Command command: Command
): (event: Event) => void { ): (event: Event) => void {
return (event) => { return (event) => {
@ -141,7 +141,7 @@ export function commandListener(
export default function findParentNodeClosestToPos( export default function findParentNodeClosestToPos(
$pos: ResolvedPos, $pos: ResolvedPos,
predicate: (node: ProsemirrorNode<any>) => boolean predicate: (node: ProsemirrorNode) => boolean
) { ) {
for (let i = $pos.depth; i > 0; i -= 1) { for (let i = $pos.depth; i > 0; i -= 1) {
const node = $pos.node(i); const node = $pos.node(i);
@ -158,7 +158,7 @@ export default function findParentNodeClosestToPos(
} }
export function nodeIsActiveFn( export function nodeIsActiveFn(
type: NodeType<any>, type: NodeType,
attrs?: any, attrs?: any,
checkParents: boolean = false checkParents: boolean = false
): (state: EditorState) => boolean { ): (state: EditorState) => boolean {
@ -185,20 +185,20 @@ export function getAttrFn(attrKey: string): (state: EditorState) => any {
}; };
} }
export function markIsActive(state: EditorState, type: MarkType<any>): boolean { export function markIsActive(state: EditorState, type: MarkType): boolean {
let { from, to } = state.selection; let { from, to } = state.selection;
return state.doc.rangeHasMark(from, to, type); return state.doc.rangeHasMark(from, to, type);
} }
export interface MarkMatch { export interface MarkMatch {
node: ProsemirrorNode<any>; node: ProsemirrorNode;
position: number; position: number;
mark: Mark; mark: Mark;
} }
export function getFirstMarkInSelection( export function getFirstMarkInSelection(
state: EditorState, state: EditorState,
type: MarkType<any> type: MarkType
): MarkMatch { ): MarkMatch {
const { to, from } = state.selection; const { to, from } = state.selection;
@ -217,7 +217,7 @@ export function getFirstMarkInSelection(
export function setAlign(align: Align): Command { export function setAlign(align: Align): Command {
return (state, dispatch) => { return (state, dispatch) => {
let { from, to } = state.selection; let { from, to } = state.selection;
let node: ProsemirrorNode<any> | null = null; let node: ProsemirrorNode | null = null;
state.doc.nodesBetween(from, to, (_node, pos) => { state.doc.nodesBetween(from, to, (_node, pos) => {
if (node) return false; if (node) return false;
if (!_node.isTextblock) return; if (!_node.isTextblock) return;

View file

@ -1,4 +1,4 @@
import { Schema } from "prosemirror-model"; import { Schema, type Attrs } from "prosemirror-model";
import { parse, inject } from "regexparam"; import { parse, inject } from "regexparam";
import { routes } from "../lib/routes"; import { routes } from "../lib/routes";
@ -21,9 +21,7 @@ function getAlign(node: HTMLElement): Align | null {
return align; return align;
} }
function getHeadingAttrs( function getHeadingAttrs(level: number): (n: string | Element) => Attrs {
level: number
): (n: Node) => { [key: string]: string } {
return (n) => ({ level, align: getAlign(n as HTMLElement) }); return (n) => ({ level, align: getAlign(n as HTMLElement) });
} }
@ -121,7 +119,8 @@ export const schema = new Schema({
parseDOM: [ parseDOM: [
{ {
tag: "ol", tag: "ol",
getAttrs(dom: Element) { getAttrs(dom) {
dom = dom as HTMLElement;
return { return {
order: dom.hasAttribute("start") ? +dom.getAttribute("start") : 1, order: dom.hasAttribute("start") ? +dom.getAttribute("start") : 1,
}; };