feat(Clipboard): added trim empty list items before copying

Author: makhnatkin

src/extensions/behavior/Clipboard/clipboard.ts

@@ -11,7 +11,12 @@ import {serializeForClipboard} from '../../../utils/serialize-for-clipboard';
 import {BaseNode, pType} from '../../base/BaseSchema';
 
 import {isInsideCode} from './code';
-import {DataTransferType, extractTextContentFromHtml, isIosSafariShare} from './utils';
+import {
+    DataTransferType,
+    extractTextContentFromHtml,
+    isIosSafariShare,
+    trimListItems,
+} from './utils';
 
 export type ClipboardPluginOptions = {
     logger: Logger2.ILogger;
@@ -236,14 +241,20 @@ function serializeSelected(view: EditorView, serializer: Serializer): SerializeR
     const sel = view.state.selection;
 
     if (sel.empty) return null;
+    let content = sel.content();
 
     if (getSharedDepthNode(sel).type.spec.code) {
-        const fragment = sel.content().content;
+        const fragment = content.content;
         return {text: fragment.textBetween(0, fragment.size)};
     }
 
-    // FIXME: Verify and use Node instead of Fragment
-    const markup = serializer.serialize(getCopyContent(view.state).content as any);
+    const trimedContent = trimListItems(content.content);
+
+    if (trimedContent !== content.content) {
+        content = new Slice(trimedContent, content.openStart, content.openEnd);
+    }
+
+    const markup = serializer.serialize(content.content as any);
     const {dom, text} = serializeForClipboard(view, sel.content());
     return {markup, text, html: dom.innerHTML};
 }

src/extensions/behavior/Clipboard/utils.test.ts

@@ -0,0 +1,100 @@
+import {Schema} from 'prosemirror-model';
+import {builders} from 'prosemirror-test-builder';
+
+import {trimListItems} from './utils';
+
+const schema = new Schema({
+    nodes: {
+        doc: {content: 'block+'},
+        text: {group: 'inline'},
+        paragraph: {group: 'block', content: 'text*', toDOM: () => ['p', 0]},
+        bullet_list: {content: 'list_item+', group: 'block'},
+        ordered_list: {content: 'list_item+', group: 'block'},
+        list_item: {content: 'block+'},
+    },
+    marks: {},
+});
+
+const {doc, paragraph: p} = builders(schema);
+const bulletList = builders(schema)['bullet_list'];
+const orderedList = builders(schema)['ordered_list'];
+const listItem = builders(schema)['list_item'];
+
+describe('trimListItems', () => {
+    it('removes empty list items at the start and end of a bullet list', () => {
+        const fragment = doc(
+            bulletList(listItem(), listItem(p('11')), listItem(p('22')), listItem()),
+        ).content;
+
+        const trimmedFragment = trimListItems(fragment);
+        expect(schema.nodes.doc.create(null, trimmedFragment)).toMatchNode(
+            doc(bulletList(listItem(p('11')), listItem(p('22')))),
+        );
+    });
+
+    it('removes empty list items at the start and end of an ordered list', () => {
+        const fragment = doc(
+            orderedList(listItem(), listItem(p('11')), listItem(p('22')), listItem()),
+        ).content;
+
+        const trimmedFragment = trimListItems(fragment);
+        expect(schema.nodes.doc.create(null, trimmedFragment)).toMatchNode(
+            doc(orderedList(listItem(p('11')), listItem(p('22')))),
+        );
+    });
+
+    it('removes only empty list items at the start and end, keeping empty ones in the middle', () => {
+        const fragment = doc(
+            bulletList(listItem(), listItem(p('11')), listItem(), listItem(p('22')), listItem()),
+        ).content;
+
+        const trimmedFragment = trimListItems(fragment);
+        expect(schema.nodes.doc.create(null, trimmedFragment)).toMatchNode(
+            doc(bulletList(listItem(p('11')), listItem(), listItem(p('22')))),
+        );
+    });
+
+    it('does not modify a list with no empty items', () => {
+        const fragment = doc(bulletList(listItem(p('11')), listItem(p('22')))).content;
+
+        const trimmedFragment = trimListItems(fragment);
+        expect(schema.nodes.doc.create(null, trimmedFragment)).toMatchNode(
+            doc(bulletList(listItem(p('11')), listItem(p('22')))),
+        );
+    });
+
+    it('removes an entire list if it contains only empty list items', () => {
+        const fragment = doc(bulletList(listItem(), listItem(), listItem())).content;
+
+        const trimmedFragment = trimListItems(fragment);
+        expect(schema.nodes.doc.create(null, trimmedFragment)).toMatchNode(doc());
+    });
+
+    it('correctly handles multiple lists in a single fragment', () => {
+        const fragment = doc(
+            bulletList(listItem(), listItem(p('11')), listItem(), listItem(p('22')), listItem()),
+            orderedList(listItem(), listItem(p('A')), listItem(p('B')), listItem()),
+        ).content;
+
+        const trimmedFragment = trimListItems(fragment);
+        expect(schema.nodes.doc.create(null, trimmedFragment)).toMatchNode(
+            doc(
+                bulletList(listItem(p('11')), listItem(), listItem(p('22'))),
+                orderedList(listItem(p('A')), listItem(p('B'))),
+            ),
+        );
+    });
+
+    it('does not modify paragraphs and other nodes outside lists', () => {
+        const fragment = doc(
+            p('Some text'),
+            bulletList(listItem(), listItem(p('11')), listItem(p('22')), listItem()),
+            p('More text'),
+        ).content;
+
+        const trimmedFragment = trimListItems(fragment);
+        expect(schema.nodes.doc.create(null, trimmedFragment)).toMatchNode(
+            doc(p('Some text'), bulletList(listItem(p('11')), listItem(p('22'))), p('More text')),
+        );
+    });
+});

src/extensions/behavior/Clipboard/utils.ts

@@ -1,3 +1,5 @@
+import {Fragment, type Node} from 'prosemirror-model';
+
 /** Сontains all data formats known to us */
 export enum DataTransferType {
     Text = 'text/plain',
@@ -56,3 +58,57 @@ export function extractTextContentFromHtml(html: string) {
 
     return null;
 }
+
+export function trimListItems(fragment: Fragment): Fragment {
+    let modified = false;
+    const newChildren: Node[] = [];
+
+    fragment.forEach((contentNode) => {
+        if (['bullet_list', 'ordered_list'].includes(contentNode.type.name)) {
+            const listItems: Node[] = [];
+            let firstNonEmptyFound = false;
+            let lastNonEmptyIndex = -1;
+
+            contentNode.forEach((node) => {
+                if (node.type.name === 'list_item') {
+                    let hasContent = false;
+
+                    node.content.forEach((child) => {
+                        if (
+                            (child.isText && child.text?.trim().length) ||
+                            (!child.isText && child.content.size > 0)
+                        ) {
+                            hasContent = true;
+                        }
+                    });
+
+                    if (hasContent) {
+                        firstNonEmptyFound = true;
+                        lastNonEmptyIndex = listItems.length;
+                    } else if (!firstNonEmptyFound) {
+                        modified = true;
+                        return;
+                    }
+                }
+
+                listItems.push(node);
+            });
+
+            if (lastNonEmptyIndex >= 0 && listItems.length > lastNonEmptyIndex + 1) {
+                modified = true;
+            }
+
+            if (modified) {
+                listItems.length = lastNonEmptyIndex + 1;
+            }
+
+            if (listItems.length > 0) {
+                newChildren.push(contentNode.copy(Fragment.fromArray(listItems)));
+            }
+        } else {
+            newChildren.push(contentNode);
+        }
+    });
+
+    return modified ? Fragment.fromArray(newChildren) : fragment;
+}