fix: editor fixes (#2067)

* autojoiner

* fix marked

* return clipboardTextSerializer as markdown

* fix clipboardTextSerializer for single lines

* cleanup two preceeding spaces in ordered lists item

* fix extra paragraph in task list

* don't zip sinple page exports

apps/client/src/features/editor/extensions/autojoiner.ts

@@ -0,0 +1,105 @@
+// https://github.com/NiclasDev63/tiptap-extension-auto-joiner - MIT
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { canJoin } from "@tiptap/pm/transform";
+import { getNodeType } from "@tiptap/react";
+import { NodeType } from "@tiptap/pm/model";
+import { Transaction } from "@tiptap/pm/state";
+
+// https://discuss.prosemirror.net/t/how-to-autojoin-all-the-time/2957/4
+// Adapted from prosemirror-commands wrapDispatchForJoin
+function autoJoin(
+  transactions: readonly Transaction[],
+  newTr: Transaction,
+  nodeTypes: NodeType[]
+) {
+  // Collect changed ranges across all transactions, mapping earlier ranges
+  // forward through later mappings so every position lands in newTr.doc space.
+  let ranges: number[] = [];
+  for (const tr of transactions) {
+    for (let i = 0; i < tr.mapping.maps.length; i++) {
+      let map = tr.mapping.maps[i];
+      if (!map) continue;
+      for (let j = 0; j < ranges.length; j++) ranges[j] = map.map(ranges[j]!);
+      map.forEach((_s, _e, from, to) => ranges.push(from, to));
+    }
+  }
+
+  // Figure out which joinable points exist inside those ranges,
+  // by checking all node boundaries in their parent nodes.
+  // Resolve against newTr.doc — the same document we will join on.
+  let joinable: number[] = [];
+  for (let i = 0; i < ranges.length; i += 2) {
+    let from = ranges[i]!,
+      to = ranges[i + 1]!;
+    let $from = newTr.doc.resolve(from),
+      depth = $from.sharedDepth(to),
+      parent = $from.node(depth);
+    for (
+      let index = $from.indexAfter(depth), pos = $from.after(depth + 1);
+      pos <= to;
+      ++index
+    ) {
+      let after = parent.maybeChild(index);
+      if (!after) break;
+      if (index && joinable.indexOf(pos) == -1) {
+        let before = parent.child(index - 1);
+        if (before.type == after.type && nodeTypes.includes(before.type))
+          joinable.push(pos);
+      }
+      pos += after.nodeSize;
+    }
+  }
+
+  // Join the joinable points (reverse order to preserve earlier positions)
+  let joined = false;
+  joinable.sort((a, b) => a - b);
+  for (let i = joinable.length - 1; i >= 0; i--) {
+    if (canJoin(newTr.doc, joinable[i]!)) {
+      newTr.join(joinable[i]!);
+      joined = true;
+    }
+  }
+
+  return joined;
+}
+
+export interface AutoJoinerOptions {
+  elementsToJoin: string[];
+}
+
+const AutoJoiner = Extension.create<AutoJoinerOptions>({
+  name: "autoJoiner",
+
+  addOptions() {
+    return {
+      elementsToJoin: [],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const plugin = new PluginKey(this.name);
+    const joinableNodes = [
+      this.editor.schema.nodes.bulletList,
+      this.editor.schema.nodes.orderedList,
+    ];
+    this.options.elementsToJoin.forEach((element) => {
+      const nodeTyp = getNodeType(element, this.editor.schema);
+      joinableNodes.push(nodeTyp);
+    });
+
+    return [
+      new Plugin({
+        key: plugin,
+        appendTransaction(transactions, _, newState) {
+          let newTr = newState.tr;
+          if (autoJoin(transactions, newTr, joinableNodes as NodeType[])) {
+            return newTr;
+          }
+        },
+      }),
+    ];
+  },
+});
+
+export default AutoJoiner;

apps/client/src/features/editor/extensions/extensions.ts

@@ -49,7 +49,7 @@ import {
   SharedStorage,
   Columns,
   Column,
-  Status
+  Status,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -97,6 +97,7 @@ import i18n from "@/i18n.ts";
 import { MarkdownClipboard } from "@/features/editor/extensions/markdown-clipboard.ts";
 import EmojiCommand from "./emoji-command";
 import { countWords } from "alfaaz";
+import AutoJoiner from "@/features/editor/extensions/autojoiner.ts";
 
 const lowlight = createLowlight(common);
 lowlight.register("mermaid", plaintext);
@@ -353,6 +354,9 @@ export const mainExtensions = [
   }).configure(),
   Columns,
   Column,
+  AutoJoiner.configure({
+    elementsToJoin: [],
+  }),
 ] as any;
 
 type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];

apps/client/src/features/editor/extensions/markdown-clipboard.ts

@@ -1,9 +1,9 @@
 // adapted from: https://github.com/aguingand/tiptap-markdown/blob/main/src/extensions/tiptap/clipboard.js - MIT
 import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { DOMParser, Fragment, Slice } from "@tiptap/pm/model";
+import { DOMParser, DOMSerializer, Fragment, Slice } from "@tiptap/pm/model";
 import { find } from "linkifyjs";
-import { markdownToHtml } from "@docmost/editor-ext";
+import { markdownToHtml, htmlToMarkdown } from "@docmost/editor-ext";
 
 export const MarkdownClipboard = Extension.create({
   name: "markdownClipboard",
@@ -19,6 +19,27 @@ export const MarkdownClipboard = Extension.create({
       new Plugin({
         key: new PluginKey("markdownClipboard"),
         props: {
+          clipboardTextSerializer: (slice) => {
+            const listTypes = ["bulletList", "orderedList", "taskList"];
+            let topLevelCount = 0;
+            let hasList = false;
+            slice.content.forEach((node) => {
+              if (listTypes.includes(node.type.name)) {
+                hasList = true;
+                topLevelCount += node.childCount;
+              } else {
+                topLevelCount++;
+              }
+            });
+
+            if (!hasList || topLevelCount < 2) return null;
+
+            const div = document.createElement("div");
+            const serializer = DOMSerializer.fromSchema(this.editor.schema);
+            const fragment = serializer.serializeFragment(slice.content);
+            div.appendChild(fragment);
+            return htmlToMarkdown(div.innerHTML);
+          },
           handlePaste: (view, event, slice) => {
             if (!event.clipboardData) {
               return false;

apps/server/src/integrations/export/export.controller.ts

@@ -61,7 +61,7 @@ export class ExportController {
 
     await this.pageAccessService.validateCanView(page, user);
 
-    const zipFileStream = await this.exportService.exportPages(
+    const result = await this.exportService.exportPages(
       dto.pageId,
       dto.format,
       dto.includeAttachments,
@@ -83,15 +83,29 @@ export class ExportController {
       },
     });
 
-    const fileName = sanitize(page.title || 'untitled') + '.zip';
+    if (result.type === 'file') {
+      const ext = getExportExtension(dto.format);
+      const fileName = sanitize(page.title || 'untitled') + ext;
+      const contentType = getMimeType(path.extname(fileName));
 
-    res.headers({
+      res.headers({
-      'Content-Type': 'application/zip',
+        'Content-Type': contentType,
-      'Content-Disposition':
+        'Content-Disposition':
-        'attachment; filename="' + encodeURIComponent(fileName) + '"',
+          'attachment; filename="' + encodeURIComponent(fileName) + '"',
-    });
+      });
 
-    res.send(zipFileStream);
+      res.send(result.content);
+    } else {
+      const fileName = sanitize(page.title || 'untitled') + '.zip';
+
+      res.headers({
+        'Content-Type': 'application/zip',
+        'Content-Disposition':
+          'attachment; filename="' + encodeURIComponent(fileName) + '"',
+      });
+
+      res.send(result.stream);
+    }
   }
 
   @UseGuards(JwtAuthGuard)

apps/server/src/integrations/export/export.service.ts

@@ -150,6 +150,13 @@ export class ExportService {
     // set to null to make export of pages with parentId work
     pages[parentPageIndex].parentPageId = null;
 
+    const isSinglePage = pages.length === 1 && !includeAttachments;
+
+    if (isSinglePage) {
+      const pageContent = await this.exportPage(format, pages[0], true);
+      return { type: 'file' as const, content: pageContent, page: pages[0] };
+    }
+
     const tree = buildTree(pages as Page[]);
 
     const baseUrl = await this.getWorkspaceBaseUrl(pages[0].workspaceId);
@@ -170,7 +177,7 @@ export class ExportService {
       compression: 'DEFLATE',
     });
 
-    return zipFile;
+    return { type: 'zip' as const, stream: zipFile, page: pages[0] };
   }
 
   async exportSpace(

packages/editor-ext/src/lib/markdown/utils/marked.utils.ts

@@ -5,18 +5,23 @@ import { mathInlineExtension } from "./math-inline.marked";
 
 marked.use({
   renderer: {
-    // @ts-ignore
+    list({ ordered, start, items }) {
-    list(body: string, isOrdered: boolean, start: number) {
+      let body = "";
-      if (isOrdered) {
+      for (const item of items) {
-        const startAttr = start !== 1 ? ` start="${start}"` : "";
+        body += this.listitem(item);
-        return `<ol ${startAttr}>\n${body}</ol>\n`;
       }
 
-      const dataType = body.includes(`<input`) ? ' data-type="taskList"' : "";
+      if (ordered) {
+        const startAttr = start !== 1 ? ` start="${start}"` : "";
+        return `<ol${startAttr}>\n${body}</ol>\n`;
+      }
+
+      const isTaskList = items.some((item) => item.task);
+      const dataType = isTaskList ? ' data-type="taskList"' : "";
       return `<ul${dataType}>\n${body}</ul>\n`;
     },
-    // @ts-ignore
+    listitem({ tokens, task: isTask, checked: isChecked }) {
-    listitem({ text, raw, task: isTask, checked: isChecked }): string {
+      const text = this.parser.parse(tokens);
       if (!isTask) {
         return `<li>${text}</li>\n`;
       }

packages/editor-ext/src/lib/markdown/utils/turndown.utils.ts

@@ -21,6 +21,7 @@ export function htmlToMarkdown(html: string): string {
     callout,
     preserveDetail,
     listParagraph,
+    orderedListItem,
     mathInline,
     mathBlock,
     iframeEmbed,
@@ -41,6 +42,40 @@ function listParagraph(turndownService: _TurndownService) {
   });
 }
 
+function orderedListItem(turndownService: _TurndownService) {
+  turndownService.addRule('orderedListItem', {
+    filter: function (node: HTMLInputElement) {
+      return node.nodeName === 'LI' && node.getAttribute('data-type') !== 'taskItem';
+    },
+    replacement: (content: string, node: HTMLInputElement, options: any) => {
+      const parent = node.parentNode as HTMLElement;
+      if (parent.nodeName !== 'OL' && parent.nodeName !== 'UL') {
+        return content;
+      }
+
+      content = content
+        .replace(/^\n+/, '')
+        .replace(/\n+$/, '\n')
+        .replace(/\n/gm, '\n  ');
+
+      let prefix: string;
+      if (parent.nodeName === 'OL') {
+        const start = parseInt(parent.getAttribute('start') || '1', 10);
+        const index = Array.prototype.indexOf.call(parent.children, node);
+        prefix = `${start + index}. `;
+      } else {
+        prefix = `${options.bulletListMarker} `;
+      }
+
+      return (
+        prefix +
+        content +
+        (node.nextSibling && !/\n$/.test(content) ? '\n' : '')
+      );
+    },
+  });
+}
+
 function callout(turndownService: _TurndownService) {
   turndownService.addRule('callout', {
     filter: function (node: HTMLInputElement) {
@@ -63,25 +98,17 @@ function taskList(turndownService: _TurndownService) {
         node.parentNode.nodeName === 'UL'
       );
     },
-    replacement: function (content: string, node: HTMLInputElement) {
+    replacement: function (_content: string, node: HTMLInputElement) {
-      const checkbox = node.querySelector(
+      const isChecked = node.getAttribute('data-checked') === 'true';
-        'input[type="checkbox"]',
+      const div = node.querySelector('div');
-      ) as HTMLInputElement;
+      const text = div ? div.textContent.trim() : node.textContent.trim();
-      const isChecked = checkbox.checked;
 
-      // Process content like regular list items
-      content = content
-        .replace(/^\n+/, '') // remove leading newlines
-        .replace(/\n+$/, '\n') // replace trailing newlines with just a single one
-        .replace(/\n/gm, '\n  '); // indent nested content with 2 spaces
-
-      // Create the checkbox prefix
       const prefix = `- ${isChecked ? '[x]' : '[ ]'} `;
 
       return (
         prefix +
-        content +
+        text +
-        (node.nextSibling && !/\n$/.test(content) ? '\n' : '')
+        (node.nextSibling && !/\n$/.test(text) ? '\n' : '')
       );
     },
   });