@fiduswriter/editor 0.1.78 → 0.1.79

package/src/menus/headerbar/view.ts

@@ -132,23 +132,23 @@ export class HeaderbarView {
 
     bindEvents(): void {
         this.listeners.onclick = event => this.onclick(event)
-        document.body.addEventListener("click", this.listeners.onclick)
+        this.editor.dom.addEventListener("click", this.listeners.onclick)
         this.listeners.onKeydown = event => this.onKeydown(event)
-        document.body.addEventListener("keydown", this.listeners.onKeydown)
+        this.editor.dom.addEventListener("keydown", this.listeners.onKeydown)
         this.listeners.onKeyup = event => this.onKeyup(event)
-        document.body.addEventListener("keyup", this.listeners.onKeyup)
+        this.editor.dom.addEventListener("keyup", this.listeners.onKeyup)
         this.listeners.onFocusout = event => this.onFocusout(event)
-        document.body.addEventListener("focusout", this.listeners.onFocusout)
+        this.editor.dom.addEventListener("focusout", this.listeners.onFocusout)
     }
 
     destroy(): void {
         if (document.activeElement?.id === "document-title") {
             this.saveFileName()
         }
-        document.body.removeEventListener("click", this.listeners.onclick!)
-        document.body.removeEventListener("keydown", this.listeners.onKeydown!)
-        document.body.removeEventListener("keyup", this.listeners.onKeyup!)
-        document.body.removeEventListener("focusout", this.listeners.onFocusout!)
+        this.editor.dom.removeEventListener("click", this.listeners.onclick!)
+        this.editor.dom.removeEventListener("keydown", this.listeners.onKeydown!)
+        this.editor.dom.removeEventListener("keyup", this.listeners.onKeyup!)
+        this.editor.dom.removeEventListener("focusout", this.listeners.onFocusout!)
     }
 
     onclick(event: MouseEvent): void {
@@ -425,7 +425,7 @@ export class HeaderbarView {
         if (!findTarget(event, "h1#document-title")) {
             return
         }
-        const docTitleEl = document.body.querySelector("h1#document-title")
+        const docTitleEl = this.editor.dom.querySelector("h1#document-title")
         if (
             !docTitleEl?.childNodes.length ||
             (docTitleEl.childNodes.length === 1 &&
@@ -537,7 +537,7 @@ export class HeaderbarView {
             // We are offline. Just reset.
             return this.update()
         }
-        const docTitleEl = document.body.querySelector("h1#document-title") as HTMLElement | null
+        const docTitleEl = this.editor.dom.querySelector("h1#document-title") as HTMLElement | null
         if (!docTitleEl) {
             return
         }
@@ -589,9 +589,9 @@ export class HeaderbarView {
         this.dd.apply(this.headerEl, diff)
         const model = this.editor.menu.headerbarModel as HeaderbarModel
         if (model.open) {
-            document.body.classList.remove("header-closed")
+            this.editor.dom.classList.remove("header-closed")
         } else {
-            document.body.classList.add("header-closed")
+            this.editor.dom.classList.add("header-closed")
         }
     }
 

package/src/menus/selection/view.ts

@@ -78,11 +78,11 @@ export class SelectionMenuView {
 
     bindEvents(): void {
         this.listeners.onclick = event => this.onclick(event)
-        document.body.addEventListener("click", this.listeners.onclick as EventListener)
+        this.editor.dom.addEventListener("click", this.listeners.onclick as EventListener)
     }
 
     destroy(): void {
-        document.body.removeEventListener(
+        this.editor.dom.removeEventListener(
             "click",
             this.listeners.onclick as EventListener
         )

package/src/menus/toolbar/view.ts

@@ -95,14 +95,14 @@ export class ToolbarView {
 
     bindEvents(): void {
         this.listeners.onclick = event => this.onclick(event)
-        document.body.addEventListener("click", this.listeners.onclick)
+        this.editor.dom.addEventListener("click", this.listeners.onclick)
         this.listeners.onmousedown = event => this.onmousedown(event)
-        document.body.addEventListener("mousedown", this.listeners.onmousedown)
+        this.editor.dom.addEventListener("mousedown", this.listeners.onmousedown)
     }
 
     destroy(): void {
-        document.body.removeEventListener("click", this.listeners.onclick!)
-        document.body.removeEventListener(
+        this.editor.dom.removeEventListener("click", this.listeners.onclick!)
+        this.editor.dom.removeEventListener(
             "mousedown",
             this.listeners.onmousedown!
         )

package/src/navigator/index.ts

@@ -46,7 +46,7 @@ export class ModNavigator {
     }
 
     bindEvents(): void {
-        document.body.addEventListener("click", event => {
+        this.editor.dom.addEventListener("click", event => {
             const el: {target?: HTMLElement} = {}
             switch (true) {
                 case findTarget(event, "#navigator-button", el):
@@ -139,17 +139,17 @@ export class ModNavigator {
             }
         })
 
-        document.body
+        this.editor.dom
             .querySelector("#navigator-list")
             ?.addEventListener("mouseover", () => {
-                document.body.classList.add("no-scroll")
+                this.editor.dom.classList.add("no-scroll")
             })
-        document.body
+        this.editor.dom
             .querySelector("#navigator-list")
             ?.addEventListener("mouseout", () => {
-                document.body.classList.remove("no-scroll")
+                this.editor.dom.classList.remove("no-scroll")
             })
-        document.body.addEventListener("keydown", event => {
+        this.editor.dom.addEventListener("keydown", event => {
             // Alt+n shortcut to toggle navigator
             if (event.altKey && event.key.toLowerCase() === "n") {
                 event.preventDefault()
@@ -368,8 +368,8 @@ export class ModNavigator {
         if (this.lastSelectedTarget) {
             const target =
                 this.lastSelectedTarget == "title"
-                    ? document.body.querySelector(`div.doc-title`)
-                    : document.body.querySelector(`#${this.lastSelectedTarget}`)
+                    ? this.editor.dom.querySelector(`div.doc-title`)
+                    : this.editor.dom.querySelector(`#${this.lastSelectedTarget}`)
             if (target) {
                 // Set selection at end of target.
                 const range = document.createRange()
@@ -437,7 +437,7 @@ export class ModNavigator {
     populateNavigator(): string | false {
         const currentPos = this.editor.view.state.selection.$head.pos
         const title =
-            document.body.querySelector("div.doc-title")?.textContent ||
+            this.editor.dom.querySelector("div.doc-title")?.textContent ||
             gettext("Untitled Document")
         const items: NavigatorItem[] = [
             {

package/src/state_plugins/settings.ts

@@ -131,7 +131,7 @@ export const settingsPlugin = (options: SettingsOptions) => {
         if (!docStyleEl) {
             docStyleEl = document.createElement("style")
             docStyleEl.id = "document-style"
-            document.body.appendChild(docStyleEl)
+            options.editor.dom.appendChild(docStyleEl)
         }
 
         docStyleEl.innerHTML = docStyleCSS
@@ -149,7 +149,7 @@ export const settingsPlugin = (options: SettingsOptions) => {
         if (!langStyleEl) {
             langStyleEl = document.createElement("style")
             langStyleEl.id = "language-style"
-            document.body.appendChild(langStyleEl)
+            options.editor.dom.appendChild(langStyleEl)
         }
 
         langStyleEl.innerHTML = `

package/src/static_app.ts

@@ -77,6 +77,29 @@ export interface StaticAppConfig {
         json: Record<string, unknown>
         status: number
     }>
+    /**
+     * Editor save mode:
+     * - "external" (default): the host drives saving through
+     *   `onSaveDocument`; no autosave runs inside the editor.
+     * - "direct": the editor autosaves (every 10 s and on page hide) via the
+     *   `saveDocument` connector. `onSaveDocument` is used as the save
+     *   connector and should return `{json: {version}, status}` (or
+     *   `{json, status: 409}` on version conflict, which triggers the
+     *   built-in merge).
+     */
+    saveMode?: "external" | "direct"
+    /**
+     * Optional API connector overrides. When provided, these replace the
+     * corresponding in-memory connectors, letting the editor talk to a real
+     * backend (e.g. Django) instead of the static in-memory stores.
+     */
+    apiConnectors?: Partial<{
+        document: EditorDocumentApi
+        documentImport: EditorDocumentImportApi
+        image: ImageApi
+        bibliography: BibliographyApi
+        contacts: EditorContactsApi
+    }>
     /**
      * Optional user preferences that control inline editing helpers.
      * Recognized keys include `inline_references` and `inline_math`.
@@ -341,7 +364,7 @@ export async function createStaticApp(
         isOffline: () => false,
         settings: {
             APPS: [appName],
-            EDITOR_SAVE_MODE: "external",
+            EDITOR_SAVE_MODE: config.saveMode ?? "external",
             EDITOR_ONLY_MODE: true,
             E2EE_MODE: "disabled",
             LANGUAGE: config.locale
@@ -357,7 +380,8 @@ export async function createStaticApp(
             documentImport: documentImportApi,
             image: imageApi,
             bibliography: bibliographyApi,
-            contacts: contactsApi
+            contacts: contactsApi,
+            ...config.apiConnectors
         }
     } as unknown as EditorApp
 

package/src/static_editor.ts

@@ -71,6 +71,11 @@ export interface StaticEditorConfig
     }>
     /** Optional extra editor plugins. */
     plugins?: Array<[string, Record<string, unknown>]>
+    /**
+     * Optional container element (or selector) to mount the editor into.
+     * When omitted, the editor replaces `document.body` (full-page mode).
+     */
+    mount?: HTMLElement | string
     /**
      * Optional user preferences that control inline editing helpers.
      * Recognized keys include `inline_references` and `inline_math`.
@@ -242,8 +247,21 @@ export async function createStaticEditor(
     // exports and printing use the latest edits.
     plugins.push([app.name, {ConfirmedDocEditorPlugin}])
 
+    let mount: HTMLElement | undefined
+    if (config.mount) {
+        mount =
+            typeof config.mount === "string"
+                ? (document.querySelector(config.mount) as HTMLElement)
+                : config.mount
+        if (!mount) {
+            throw new Error(
+                `createStaticEditor: mount element not found (${String(config.mount)})`
+            )
+        }
+    }
+
     const editor = new Editor(
-        {app, user},
+        {app, user, mount},
         docPath,
         String(docId),
         plugins

package/src/track/mod.ts

@@ -30,7 +30,7 @@ export class ModTrack {
 
     bindEvents(): void {
         // Bind all the click events related to track changes
-        document.body.addEventListener("click", event => {
+        this.editor.dom.addEventListener("click", event => {
             const el: {target?: HTMLElement} = {}
             switch (true) {
                 case findTarget(event, ".track-accept", el): {

package/src/types.ts

@@ -337,6 +337,11 @@ export interface EditorUser {
 export interface EditorOptions {
     app: EditorApp
     user: EditorUser
+    /**
+     * Optional container element to mount the editor into. When omitted, the
+     * editor replaces `document.body` (full-page mode).
+     */
+    mount?: HTMLElement
 }
 
 /** Editor plugin tuple used to build the ProseMirror state. */
@@ -366,6 +371,7 @@ export interface Editor {
     view: EditorView
     currentView: EditorView
     dom: HTMLElement
+    mount?: HTMLElement
     ws?: {
         connectionCount?: number
         online?: boolean