@panneau/editor 0.0.0-stage → 5.0.0-alpha.10

package/dist/styles.js

@@ -0,0 +1,86 @@
+import { getHtmlAttributes } from "./extensions/attributes.js";
+//#region src/styles.ts
+/** The element a node is written as: `p`, `h2`, `li`. */
+function elementOf(node) {
+	switch (node.type.name) {
+		case "paragraph": return "p";
+		case "heading": return `h${String(node.attrs.level)}`;
+		case "blockquote": return "blockquote";
+		case "bulletList": return "ul";
+		case "orderedList": return "ol";
+		case "listItem": return "li";
+		default: return null;
+	}
+}
+var elementOfStyle = (style) => style.element ?? "p";
+var classesOf = (value) => (value ?? "").split(/\s+/).filter((name) => name !== "");
+/**
+* The nodes a style applies to: the paragraphs and headings of the selection, or the closest
+* quote, list or list item around it.
+*/
+function findTargets(state, element) {
+	const { from, to, $from } = state.selection;
+	if (element === "p" || /^h[1-6]$/.test(element)) {
+		const targets = [];
+		state.doc.nodesBetween(from, to, (node, pos) => {
+			if (node.isTextblock && elementOf(node) === element) targets.push({
+				pos,
+				node
+			});
+		});
+		return targets;
+	}
+	for (let depth = $from.depth; depth > 0; depth -= 1) {
+		const node = $from.node(depth);
+		if (elementOf(node) === element) return [{
+			pos: $from.before(depth),
+			node
+		}];
+	}
+	return [];
+}
+/** Whether a node has the classes of a style. */
+function hasStyle(node, style) {
+	const classes = classesOf(getHtmlAttributes(node.attrs).class);
+	const wanted = classesOf(style.class);
+	return wanted.length > 0 && wanted.every((name) => classes.includes(name));
+}
+/** Whether a style can apply to the selection. */
+function canApplyStyle(state, style) {
+	return findTargets(state, elementOfStyle(style)).length > 0;
+}
+/** The style of the selection: the first one that all its targets have. */
+function getActiveStyle(state, styles) {
+	return styles.find((style) => {
+		const targets = findTargets(state, elementOfStyle(style));
+		return targets.length > 0 && targets.every(({ node }) => hasStyle(node, style));
+	}) ?? null;
+}
+/**
+* Puts a style on the selection, in place of the other styles of its element, or removes the
+* styles of the paragraphs and headings of the selection with `null`. Other classes stay.
+*/
+function applyStyle(editor, style, styles) {
+	const { state } = editor;
+	const elements = style !== null ? [elementOfStyle(style)] : [...new Set(styles.map(elementOfStyle))].filter((element) => element === "p" || /^h[1-6]$/.test(element));
+	const { tr } = state;
+	elements.forEach((element) => {
+		const others = styles.filter((candidate) => elementOfStyle(candidate) === element).flatMap((candidate) => classesOf(candidate.class));
+		findTargets(state, element).forEach(({ pos, node }) => {
+			const attributes = { ...getHtmlAttributes(node.attrs) };
+			const classes = [...classesOf(attributes.class).filter((name) => !others.includes(name)), ...style !== null ? classesOf(style.class) : []];
+			if (classes.length > 0) attributes.class = classes.join(" ");
+			else delete attributes.class;
+			tr.setNodeMarkup(pos, void 0, {
+				...node.attrs,
+				htmlAttributes: Object.keys(attributes).length > 0 ? attributes : null
+			});
+		});
+	});
+	if (tr.docChanged) editor.view.dispatch(tr);
+	editor.commands.focus();
+}
+//#endregion
+export { applyStyle, canApplyStyle, elementOf, getActiveStyle };
+
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["Editor","Node","ProseMirrorNode","EditorState","RichTextStyle","getHtmlAttributes","elementOf","node","type","name","String","attrs","level","elementOfStyle","style","element","classesOf","value","split","filter","Target","pos","findTargets","state","from","to","$from","selection","test","targets","doc","nodesBetween","isTextblock","push","depth","before","hasStyle","classes","class","wanted","length","every","includes","canApplyStyle","getActiveStyle","styles","find","applyStyle","editor","elements","Set","map","tr","forEach","others","candidate","flatMap","attributes","join","setNodeMarkup","undefined","htmlAttributes","Object","keys","docChanged","view","dispatch","commands","focus"],"sources":["../src/styles.ts"],"sourcesContent":["import type { Editor } from '@tiptap/core';\nimport type { Node as ProseMirrorNode } from '@tiptap/pm/model';\nimport type { EditorState } from '@tiptap/pm/state';\n\nimport type { RichTextStyle } from '@panneau/protocol';\n\nimport { getHtmlAttributes } from './extensions/attributes';\n\n/** The element a node is written as: `p`, `h2`, `li`. */\nexport function elementOf(node: ProseMirrorNode): string | null {\n    switch (node.type.name) {\n        case 'paragraph':\n            return 'p';\n        case 'heading':\n            return `h${String(node.attrs.level)}`;\n        case 'blockquote':\n            return 'blockquote';\n        case 'bulletList':\n            return 'ul';\n        case 'orderedList':\n            return 'ol';\n        case 'listItem':\n            return 'li';\n        default:\n            return null;\n    }\n}\n\nconst elementOfStyle = (style: RichTextStyle) => style.element ?? 'p';\nconst classesOf = (value: string | undefined) =>\n    (value ?? '').split(/\\s+/).filter((name) => name !== '');\n\ninterface Target {\n    pos: number;\n    node: ProseMirrorNode;\n}\n\n/**\n * The nodes a style applies to: the paragraphs and headings of the selection, or the closest\n * quote, list or list item around it.\n */\nfunction findTargets(state: EditorState, element: string): Target[] {\n    const { from, to, $from } = state.selection;\n    if (element === 'p' || /^h[1-6]$/.test(element)) {\n        const targets: Target[] = [];\n        state.doc.nodesBetween(from, to, (node, pos) => {\n            if (node.isTextblock && elementOf(node) === element) {\n                targets.push({ pos, node });\n            }\n        });\n        return targets;\n    }\n    for (let depth = $from.depth; depth > 0; depth -= 1) {\n        const node = $from.node(depth);\n        if (elementOf(node) === element) {\n            return [{ pos: $from.before(depth), node }];\n        }\n    }\n    return [];\n}\n\n/** Whether a node has the classes of a style. */\nfunction hasStyle(node: ProseMirrorNode, style: RichTextStyle): boolean {\n    const classes = classesOf(getHtmlAttributes(node.attrs).class);\n    const wanted = classesOf(style.class);\n    return wanted.length > 0 && wanted.every((name) => classes.includes(name));\n}\n\n/** Whether a style can apply to the selection. */\nexport function canApplyStyle(state: EditorState, style: RichTextStyle): boolean {\n    return findTargets(state, elementOfStyle(style)).length > 0;\n}\n\n/** The style of the selection: the first one that all its targets have. */\nexport function getActiveStyle(\n    state: EditorState,\n    styles: readonly RichTextStyle[],\n): RichTextStyle | null {\n    return (\n        styles.find((style) => {\n            const targets = findTargets(state, elementOfStyle(style));\n            return targets.length > 0 && targets.every(({ node }) => hasStyle(node, style));\n        }) ?? null\n    );\n}\n\n/**\n * Puts a style on the selection, in place of the other styles of its element, or removes the\n * styles of the paragraphs and headings of the selection with `null`. Other classes stay.\n */\nexport function applyStyle(\n    editor: Editor,\n    style: RichTextStyle | null,\n    styles: readonly RichTextStyle[],\n): void {\n    const { state } = editor;\n    const elements =\n        style !== null\n            ? [elementOfStyle(style)]\n            : [...new Set(styles.map(elementOfStyle))].filter(\n                  (element) => element === 'p' || /^h[1-6]$/.test(element),\n              );\n    const { tr } = state;\n    elements.forEach((element) => {\n        const others = styles\n            .filter((candidate) => elementOfStyle(candidate) === element)\n            .flatMap((candidate) => classesOf(candidate.class));\n        findTargets(state, element).forEach(({ pos, node }) => {\n            const attributes = { ...getHtmlAttributes(node.attrs) };\n            const classes = [\n                ...classesOf(attributes.class).filter((name) => !others.includes(name)),\n                ...(style !== null ? classesOf(style.class) : []),\n            ];\n            if (classes.length > 0) {\n                attributes.class = classes.join(' ');\n            } else {\n                delete attributes.class;\n            }\n            tr.setNodeMarkup(pos, undefined, {\n                ...node.attrs,\n                htmlAttributes: Object.keys(attributes).length > 0 ? attributes : null,\n            });\n        });\n    });\n    if (tr.docChanged) {\n        editor.view.dispatch(tr);\n    }\n    editor.commands.focus();\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,72 @@
 {
-  "name": "@panneau/editor",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@panneau/editor",
+    "version": "5.0.0-alpha.10",
+    "description": "The rich text field of Panneau, on TipTap 3: HTML storage, a toolbar and block styles set from the definition, and extensions from plugins.",
+    "type": "module",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/folkloreinc/panneau-js.git",
+        "directory": "packages/editor"
+    },
+    "sideEffects": [
+        "*.css"
+    ],
+    "exports": {
+        ".": {
+            "@panneau/source": "./src/index.ts",
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "vite build && node ../../scripts/declarations.js",
+        "typecheck": "tsc --noEmit",
+        "api": "node ../../scripts/declarations.js && node ../../scripts/api-report.js"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "@tiptap/core": "^3.32.1",
+        "@tiptap/pm": "^3.32.1",
+        "@tiptap/react": "^3.32.1",
+        "react": "^19.2.0",
+        "react-aria-components": "^1.22.0",
+        "react-dom": "^19.2.0",
+        "react-intl": "^12.0.0"
+    },
+    "dependencies": {
+        "@panneau/fields": "5.0.0-alpha.10",
+        "@panneau/intl": "5.0.0-alpha.10",
+        "@panneau/protocol": "5.0.0-alpha.10",
+        "@panneau/ui": "5.0.0-alpha.10",
+        "@tiptap/extension-blockquote": "^3.32.1",
+        "@tiptap/extension-bold": "^3.32.1",
+        "@tiptap/extension-code": "^3.32.1",
+        "@tiptap/extension-document": "^3.32.1",
+        "@tiptap/extension-hard-break": "^3.32.1",
+        "@tiptap/extension-heading": "^3.32.1",
+        "@tiptap/extension-horizontal-rule": "^3.32.1",
+        "@tiptap/extension-italic": "^3.32.1",
+        "@tiptap/extension-link": "^3.32.1",
+        "@tiptap/extension-list": "^3.32.1",
+        "@tiptap/extension-paragraph": "^3.32.1",
+        "@tiptap/extension-strike": "^3.32.1",
+        "@tiptap/extension-subscript": "^3.32.1",
+        "@tiptap/extension-superscript": "^3.32.1",
+        "@tiptap/extension-text": "^3.32.1",
+        "@tiptap/extension-underline": "^3.32.1",
+        "@tiptap/extensions": "^3.32.1",
+        "lucide-react": "^1.57.0"
+    },
+    "devDependencies": {
+        "@tiptap/core": "^3.32.1",
+        "@tiptap/pm": "^3.32.1",
+        "@tiptap/react": "^3.32.1"
+    }
+}