@eigenpal/nuxt-docx-editor 0.0.0

package/README.md

@@ -0,0 +1,113 @@
+<p align="center">
+  <a href="https://www.docx-editor.dev/">
+    <img src="https://raw.githubusercontent.com/eigenpal/docx-editor/main/assets/header.png" alt="DOCX Editor — .docx in, .docx out. Open source, agent ready, client-side." width="500" />
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@eigenpal/nuxt-docx-editor"><img src="https://img.shields.io/npm/v/@eigenpal/nuxt-docx-editor.svg?style=flat-square&color=3B5BDB" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/@eigenpal/nuxt-docx-editor"><img src="https://img.shields.io/npm/dm/@eigenpal/nuxt-docx-editor.svg?style=flat-square&color=3B5BDB" alt="npm downloads" /></a>
+  <a href="https://github.com/eigenpal/docx-editor/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-Apache_2.0-blue.svg?style=flat-square&color=3B5BDB" alt="license" /></a>
+  <a href="https://docx-editor.dev/editor"><img src="https://img.shields.io/badge/Live_Demo-3B5BDB?style=flat-square&logo=vercel&logoColor=white" alt="Demo" /></a>
+  <a href="https://www.docx-editor.dev/docs"><img src="https://img.shields.io/badge/Docs-3B5BDB?style=flat-square&logo=readthedocs&logoColor=white" alt="Documentation" /></a>
+</p>
+
+# @eigenpal/nuxt-docx-editor
+
+Nuxt 3 & 4 module for the [docx-editor](https://docx-editor.dev). Wraps [`@eigenpal/docx-editor-vue`](https://www.npmjs.com/package/@eigenpal/docx-editor-vue) and auto-imports an SSR-safe `<DocxEditor>` component — no manual import, no `<ClientOnly>` boilerplate.
+
+## Quick Start
+
+```bash
+npm install @eigenpal/nuxt-docx-editor
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@eigenpal/nuxt-docx-editor'],
+});
+```
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const buffer = ref<ArrayBuffer | null>(null);
+
+async function loadFile(e: Event) {
+  const file = (e.target as HTMLInputElement).files?.[0];
+  buffer.value = file ? await file.arrayBuffer() : null;
+}
+</script>
+
+<template>
+  <input type="file" accept=".docx" @change="loadFile" />
+  <DocxEditor v-if="buffer" :document-buffer="buffer" mode="editing" />
+</template>
+```
+
+That's the whole integration. The module registers `<DocxEditor>` as **client-only** — the editor drives a hidden ProseMirror instance and browser DOM APIs, so it never runs during SSR. Nuxt renders a placeholder on the server and hydrates the editor in the browser. The module also pushes the editor stylesheet into Nuxt's CSS pipeline, so the toolbar is styled without a manual `import`.
+
+## Options
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@eigenpal/nuxt-docx-editor'],
+  docxEditor: {
+    prefix: 'Ep', // <EpDocxEditor> instead of <DocxEditor>
+    injectStyles: true, // push @eigenpal/docx-editor-vue/styles.css into nuxt.options.css
+  },
+});
+```
+
+| Option         | Type      | Default | Description                                                                      |
+| -------------- | --------- | ------- | -------------------------------------------------------------------------------- |
+| `prefix`       | `string`  | `''`    | Component name prefix. `'Ep'` registers `<EpDocxEditor>`.                         |
+| `injectStyles` | `boolean` | `true`  | Set `false` to import `@eigenpal/docx-editor-vue/styles.css` yourself.            |
+
+## Packages
+
+| Package                                                                                      | Description                                                                                                                                |
+| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| [`@eigenpal/docx-editor-react`](https://www.npmjs.com/package/@eigenpal/docx-editor-react)   | <img src="https://cdn.simpleicons.org/react/61DAFB" width="20" align="middle" /> &nbsp; React adapter. Toolbar, paged editor, plugins.     |
+| [`@eigenpal/docx-editor-vue`](https://www.npmjs.com/package/@eigenpal/docx-editor-vue)       | <img src="https://cdn.simpleicons.org/vuedotjs/4FC08D" width="20" align="middle" /> &nbsp; Vue 3 adapter. Toolbar, paged editor, plugins.  |
+| [`@eigenpal/nuxt-docx-editor`](https://www.npmjs.com/package/@eigenpal/nuxt-docx-editor)     | <img src="https://cdn.simpleicons.org/nuxtdotjs/00DC82" width="20" align="middle" /> &nbsp; Nuxt 3 & 4 module wrapping the Vue adapter.    |
+| [`@eigenpal/docx-editor-core`](https://www.npmjs.com/package/@eigenpal/docx-editor-core)     | Framework-agnostic core: OOXML parser, serializer, layout engine, ProseMirror schema. Depend on this if you fork the React or Vue adapter. |
+| [`@eigenpal/docx-editor-i18n`](https://www.npmjs.com/package/@eigenpal/docx-editor-i18n)     | Shared locale strings and types consumed by both adapters.                                                                                 |
+| [`@eigenpal/docx-editor-agents`](https://www.npmjs.com/package/@eigenpal/docx-editor-agents) | Agent SDK and chat UI: framework-agnostic bridge, MCP server, AI SDK adapters, plus React UI.                                              |
+
+## Component API
+
+`<DocxEditor>` is the Vue adapter's component, registered unchanged — the same props, emits, and `DocxEditorRef` methods. Full reference: **[docx-editor.dev/docs/props](https://www.docx-editor.dev/docs/props)**.
+
+## Composables
+
+The Vue composables (`useDocxEditor`, `useZoom`, `useFindReplace`, `useAutoSave`, ...) are auto-imported — use them in any component or page without an `import`:
+
+```vue
+<script setup lang="ts">
+const { save } = useAutoSave(/* ... */);
+</script>
+```
+
+## Beyond the component
+
+Other `@eigenpal/docx-editor-vue` surfaces — `renderAsync`, `createEmptyDocument`, the `DocxEditorProps`/`DocxEditorRef` types, and the `/ui`, `/dialogs`, `/plugin-api` subpaths — are not re-exported by this module. Import them from the adapter directly, and add it to your own `dependencies` so the import is explicit:
+
+```bash
+npm install @eigenpal/docx-editor-vue
+```
+
+```ts
+import { renderAsync, createEmptyDocument } from '@eigenpal/docx-editor-vue';
+```
+
+## Contributing
+
+Contributions welcome. See [CONTRIBUTING.md](https://github.com/eigenpal/docx-editor/blob/main/CONTRIBUTING.md) for setup, tests, and the one-time CLA signature.
+
+## Commercial Support
+
+> [!TIP]
+> Questions or custom features? Email **[docx-editor@eigenpal.com](mailto:docx-editor@eigenpal.com)**.

package/dist/module.d.mts

@@ -0,0 +1,25 @@
+import { NuxtModule } from '@nuxt/schema';
+
+/**
+ * Configuration for the DOCX editor Nuxt module, read from the
+ * `docxEditor` key of `nuxt.config`.
+ *
+ * @public
+ */
+interface ModuleOptions {
+    /**
+     * Component name prefix. With `prefix: 'Ep'` the component is auto-imported
+     * as `<EpDocxEditor>` instead of `<DocxEditor>`. Defaults to `''`.
+     */
+    prefix?: string;
+    /**
+     * Whether the module pushes the editor stylesheet into `nuxt.options.css`.
+     * Set to `false` to import `@eigenpal/docx-editor-vue/styles.css` yourself.
+     * Defaults to `true`.
+     */
+    injectStyles?: boolean;
+}
+declare const module$1: NuxtModule<ModuleOptions>;
+
+export { module$1 as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@eigenpal/nuxt-docx-editor",
+  "configKey": "docxEditor",
+  "compatibility": {
+    "nuxt": ">=3.0.0"
+  },
+  "version": "0.0.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,54 @@
+import { defineNuxtModule, createResolver, addComponent, addImports } from '@nuxt/kit';
+
+const COMPOSABLES_SUBPATH = "@eigenpal/docx-editor-vue/composables";
+const STYLES_SUBPATH = "@eigenpal/docx-editor-vue/styles.css";
+const VUE_COMPOSABLES = [
+  "useAutoSave",
+  "useClipboard",
+  "useCommentSidebarItems",
+  "useDocxEditor",
+  "useDragAutoScroll",
+  "useFindReplace",
+  "useFixedDropdown",
+  "useHistory",
+  "useSelectionHighlight",
+  "useTableResize",
+  "useTableSelection",
+  "useTrackedChanges",
+  "useVisualLineNavigation",
+  "useWheelZoom",
+  "useZoom"
+];
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@eigenpal/nuxt-docx-editor",
+    configKey: "docxEditor",
+    compatibility: {
+      nuxt: ">=3.0.0"
+    }
+  },
+  defaults: {
+    prefix: "",
+    injectStyles: true
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    if (options.injectStyles) {
+      nuxt.options.css.push(STYLES_SUBPATH);
+    }
+    const optimizeDeps = nuxt.options.vite.optimizeDeps ??= {};
+    optimizeDeps.include = [
+      ...optimizeDeps.include ?? [],
+      "@eigenpal/docx-editor-core",
+      "@eigenpal/docx-editor-vue"
+    ];
+    addComponent({
+      name: `${options.prefix}DocxEditor`,
+      filePath: resolver.resolve("./runtime/components/DocxEditor"),
+      mode: "client"
+    });
+    addImports(VUE_COMPOSABLES.map((name) => ({ name, from: COMPOSABLES_SUBPATH })));
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/DocxEditor.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Runtime entry for the auto-imported `<DocxEditor>` component.
+ *
+ * Re-exports the Vue adapter's editor component unchanged so all of its props,
+ * events, and the `DocxEditorRef` typing flow through to Nuxt consumers. The
+ * client-only behaviour is applied by `module.ts` via `addComponent`, not here.
+ */
+export { DocxEditor as default } from '@eigenpal/docx-editor-vue';
+//# sourceMappingURL=DocxEditor.d.ts.map

package/dist/runtime/components/DocxEditor.js

@@ -0,0 +1 @@
+export { DocxEditor as default } from "@eigenpal/docx-editor-vue";

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@eigenpal/nuxt-docx-editor",
+  "version": "0.0.0",
+  "description": "Nuxt 3 & 4 module for the @eigenpal/docx-editor WYSIWYG DOCX editor — auto-imports an SSR-safe <DocxEditor> component.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "prepack": "nuxt-module-build build",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.14.0 || ^4.0.0",
+    "@eigenpal/docx-editor-vue": "^1.0.1",
+    "prosemirror-commands": "^1.5.2",
+    "prosemirror-dropcursor": "^1.8.2",
+    "prosemirror-history": "^1.4.0",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-model": "^1.19.4",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-tables": "^1.8.5",
+    "prosemirror-transform": "^1.12.0",
+    "prosemirror-view": "^1.41.6"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^1.0.0",
+    "@nuxt/schema": "^3.14.0",
+    "nuxt": "^3.14.0",
+    "vue": "^3.5.0"
+  },
+  "keywords": [
+    "nuxt",
+    "nuxt-module",
+    "docx",
+    "editor",
+    "word",
+    "document",
+    "ssr"
+  ],
+  "author": {
+    "name": "Jedr Blaszyk",
+    "email": "jedr@eigenpal.com",
+    "url": "https://github.com/jedrazb"
+  },
+  "license": "Apache-2.0",
+  "homepage": "https://docx-editor.dev/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eigenpal/docx-editor.git",
+    "directory": "packages/nuxt"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}