@thomasfosterau/prosekit-svelte 0.0.0 → 0.1.0

package/dist/toolbar/items.js

@@ -0,0 +1,262 @@
+/**
+ * The toolbar's data model, and the default sets built from it.
+ *
+ * `BlockToolbar` renders a list rather than a hard-coded row of buttons.
+ * The applications this package was extracted from hard-coded theirs, and
+ * the cost showed: one of them carried five buttons for node types its
+ * grammar no longer had, and neither could add an item without editing the
+ * component. Here an item is a value — an application appends its own,
+ * reorders, drops one, or passes a list of its own making.
+ *
+ * An item's `run` receives a {@link ToolbarRunContext} rather than the
+ * editor alone, because two of the default items open a dialog the toolbar
+ * owns. `dialogs.link()` / `dialogs.image()` are how an item asks for one
+ * without importing it.
+ *
+ * @module
+ */
+import { defaultEditorMessages } from "../messages.svelte.js";
+/** Narrows an `items` entry to the separator arm. */
+export function isToolbarSeparator(entry) {
+    return 'separator' in entry;
+}
+/**
+ * Reads a mark's active state without assuming the schema has it.
+ *
+ * The default item set covers `defineBlockDocumentExtension()`'s grammar,
+ * but an application may pass a narrower extension and keep the default
+ * items; a missing mark then makes the button inert rather than throwing on
+ * every editor update.
+ */
+const isMarkActive = (editor, name) => editor.marks[name]?.isActive() ?? false;
+/** {@link isMarkActive} for a node type, optionally matching `attrs`. */
+const isNodeActive = (editor, name, attrs) => editor.nodes[name]?.isActive(attrs) ?? false;
+/**
+ * Toggles one of the three marks that have no toggle command of their own.
+ *
+ * `highlight`, `subscript` and `superscript` are the applications' own mark
+ * specs, and ProseKit's generic `addMark` is the only command that reaches
+ * them. `addMark` alone can never turn a mark off, which is exactly the lie
+ * `aria-pressed` would then tell, so the item reads its own `isActive` and
+ * picks `removeMark` when the mark is on.
+ */
+const toggleGenericMark = (editor, type) => {
+    if (isMarkActive(editor, type))
+        editor.commands['removeMark']?.({ type });
+    else
+        editor.commands['addMark']?.({ type });
+};
+/**
+ * The default toolbar: the nineteen items the applications shipped, in their
+ * order, with two separators marking the mark / block / history groups.
+ *
+ * The twentieth control those toolbars carried was a button that toggled an
+ * ad-hoc "slash" panel; it is the insert menu now, and `BlockToolbar`
+ * renders it itself from {@link createDefaultSlashCommands}.
+ *
+ * Every `run` goes through the editor's own `commands`, `marks` and `nodes`,
+ * so the set works against any extension that registers those node and mark
+ * types and quietly does nothing against one that does not.
+ *
+ * @param messages - Labels to use instead of the English defaults. A partial
+ *   record; unlisted keys keep their default.
+ */
+export function createDefaultToolbarItems(messages) {
+    const m = { ...defaultEditorMessages, ...messages };
+    return [
+        {
+            id: 'bold',
+            label: m.bold,
+            kind: 'toggle',
+            isActive: (editor) => isMarkActive(editor, 'bold'),
+            run: ({ editor }) => void editor.commands['toggleBold']?.(),
+        },
+        {
+            id: 'italic',
+            label: m.italic,
+            kind: 'toggle',
+            isActive: (editor) => isMarkActive(editor, 'italic'),
+            run: ({ editor }) => void editor.commands['toggleItalic']?.(),
+        },
+        {
+            id: 'underline',
+            label: m.underline,
+            kind: 'toggle',
+            isActive: (editor) => isMarkActive(editor, 'underline'),
+            run: ({ editor }) => void editor.commands['toggleUnderline']?.(),
+        },
+        {
+            id: 'strike',
+            label: m.strike,
+            kind: 'toggle',
+            isActive: (editor) => isMarkActive(editor, 'strike'),
+            run: ({ editor }) => void editor.commands['toggleStrike']?.(),
+        },
+        {
+            id: 'highlight',
+            label: m.highlight,
+            kind: 'toggle',
+            isActive: (editor) => isMarkActive(editor, 'highlight'),
+            run: ({ editor }) => toggleGenericMark(editor, 'highlight'),
+        },
+        {
+            id: 'subscript',
+            label: m.subscript,
+            kind: 'toggle',
+            isActive: (editor) => isMarkActive(editor, 'subscript'),
+            run: ({ editor }) => toggleGenericMark(editor, 'subscript'),
+        },
+        {
+            id: 'superscript',
+            label: m.superscript,
+            kind: 'toggle',
+            isActive: (editor) => isMarkActive(editor, 'superscript'),
+            run: ({ editor }) => toggleGenericMark(editor, 'superscript'),
+        },
+        {
+            id: 'link',
+            label: m.link,
+            kind: 'action',
+            run: ({ dialogs }) => dialogs.link(),
+        },
+        { id: 'marks-blocks', separator: true },
+        {
+            id: 'paragraph',
+            // An action, not a toggle: `setParagraph` only ever sets, so a pressed
+            // state that can never be un-pressed would be a claim `aria-pressed`
+            // makes out loud and the button cannot honour. The eleven items around
+            // it each have a real toggle command.
+            label: m.paragraph,
+            kind: 'action',
+            run: ({ editor }) => void editor.commands['setParagraph']?.(),
+        },
+        {
+            id: 'heading2',
+            label: m.heading2,
+            kind: 'toggle',
+            isActive: (editor) => isNodeActive(editor, 'heading', { level: 2 }),
+            run: ({ editor }) => void editor.commands['toggleHeading']?.({ level: 2 }),
+        },
+        {
+            id: 'quote',
+            label: m.quote,
+            kind: 'toggle',
+            isActive: (editor) => isNodeActive(editor, 'blockquote'),
+            run: ({ editor }) => void editor.commands['toggleBlockquote']?.(),
+        },
+        {
+            id: 'bullets',
+            label: m.bullets,
+            kind: 'toggle',
+            isActive: (editor) => isNodeActive(editor, 'list', { kind: 'bullet' }),
+            run: ({ editor }) => void editor.commands['toggleList']?.({ kind: 'bullet' }),
+        },
+        {
+            id: 'numbered',
+            label: m.numbered,
+            kind: 'toggle',
+            isActive: (editor) => isNodeActive(editor, 'list', { kind: 'ordered' }),
+            run: ({ editor }) => void editor.commands['toggleList']?.({ kind: 'ordered' }),
+        },
+        {
+            id: 'code-block',
+            label: m.codeBlock,
+            kind: 'toggle',
+            isActive: (editor) => isNodeActive(editor, 'codeBlock'),
+            run: ({ editor }) => void editor.commands['toggleCodeBlock']?.(),
+        },
+        {
+            id: 'rule',
+            label: m.rule,
+            kind: 'action',
+            run: ({ editor }) => void editor.commands['insertHorizontalRule']?.(),
+        },
+        {
+            id: 'table',
+            label: m.table,
+            kind: 'action',
+            run: ({ editor }) => void editor.commands['insertTable']?.({ row: 3, col: 3 }),
+        },
+        {
+            id: 'image',
+            label: m.image,
+            kind: 'action',
+            run: ({ dialogs }) => dialogs.image(),
+        },
+        { id: 'blocks-history', separator: true },
+        {
+            id: 'undo',
+            label: m.undo,
+            kind: 'action',
+            run: ({ editor }) => void editor.commands['undo']?.(),
+        },
+        {
+            id: 'redo',
+            label: m.redo,
+            kind: 'action',
+            run: ({ editor }) => void editor.commands['redo']?.(),
+        },
+    ];
+}
+/**
+ * The default insert menu: the ten entries the applications shipped, in
+ * their order.
+ *
+ * @param messages - Labels to use instead of the English defaults. A partial
+ *   record; unlisted keys keep their default.
+ */
+export function createDefaultSlashCommands(messages) {
+    const m = { ...defaultEditorMessages, ...messages };
+    return [
+        {
+            id: 'paragraph',
+            label: m.slashParagraph,
+            run: ({ editor }) => void editor.commands['setParagraph']?.(),
+        },
+        {
+            id: 'heading2',
+            label: m.slashHeading2,
+            run: ({ editor }) => void editor.commands['toggleHeading']?.({ level: 2 }),
+        },
+        {
+            id: 'blockquote',
+            label: m.slashBlockquote,
+            run: ({ editor }) => void editor.commands['toggleBlockquote']?.(),
+        },
+        {
+            id: 'bullet-list',
+            label: m.slashBulletList,
+            run: ({ editor }) => void editor.commands['toggleList']?.({ kind: 'bullet' }),
+        },
+        {
+            id: 'ordered-list',
+            label: m.slashOrderedList,
+            run: ({ editor }) => void editor.commands['toggleList']?.({ kind: 'ordered' }),
+        },
+        {
+            id: 'todo-list',
+            label: m.slashTodoList,
+            run: ({ editor }) => void editor.commands['toggleList']?.({ kind: 'task' }),
+        },
+        {
+            id: 'code-block',
+            label: m.slashCodeBlock,
+            run: ({ editor }) => void editor.commands['toggleCodeBlock']?.(),
+        },
+        {
+            id: 'table',
+            label: m.slashTable,
+            run: ({ editor }) => void editor.commands['insertTable']?.({ row: 3, col: 3 }),
+        },
+        {
+            id: 'image',
+            label: m.slashImage,
+            run: ({ dialogs }) => dialogs.image(),
+        },
+        {
+            id: 'horizontal-rule',
+            label: m.slashHorizontalRule,
+            run: ({ editor }) => void editor.commands['insertHorizontalRule']?.(),
+        },
+    ];
+}

package/package.json

@@ -1,14 +1,68 @@
 {
+  "$schema": "https://www.schemastore.org/package",
   "name": "@thomasfosterau/prosekit-svelte",
-  "version": "0.0.0",
-  "description": "Placeholder reserved for npm trusted publishing; the first real release of @thomasfosterau/prosekit-svelte is 0.1.0.",
+  "version": "0.1.0",
+  "description": "Svelte 5 rich-text editor components on ProseKit — Editor, BlockEditor, InlineEditor, a declarative toolbar with an insert menu and link/image dialogs on bits-ui, every string a prop",
+  "keywords": [
+    "accessibility",
+    "bits-ui",
+    "editor",
+    "prosekit",
+    "prosemirror",
+    "rich-text",
+    "svelte",
+    "svelte5"
+  ],
   "license": "MIT",
+  "author": "Thomas Foster <me@thomasfoster.au>",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/thomasfosterau/prosekit-utilities.git",
+    "url": "https://github.com/thomasfosterau/prosekit-utilities.git",
     "directory": "packages/prosekit-svelte"
   },
-  "publishConfig": {
-    "access": "public"
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@thomasfosterau/prosekit-utilities": "0.1.0",
+    "bits-ui": "^2.20.2"
+  },
+  "devDependencies": {
+    "@prosekit/pm": "^0.1.21",
+    "@storybook/addon-a11y": "^10.6.6",
+    "@storybook/addon-svelte-csf": "^5.1.6",
+    "@storybook/sveltekit": "^10.6.6",
+    "@sveltejs/kit": "3.1.1",
+    "@sveltejs/package": "3.0.2",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@types/node": "^26.6.6",
+    "@vitest/browser-playwright": "5.0.5",
+    "daisyui": "^5.7.50",
+    "playwright": "1.60.0",
+    "prosekit": "^0.23.0",
+    "storybook": "^10.6.6",
+    "svelte": "^5.57.3",
+    "svelte-check": "^4.7.8",
+    "tailwindcss": "^4.3.3",
+    "vitest": "5.0.5",
+    "vitest-browser-svelte": "^3.1.0"
+  },
+  "peerDependencies": {
+    "@prosekit/pm": "^0.1.19",
+    "prosekit": "^0.22.2",
+    "svelte": "^5.30.1"
   }
-}
+}