Merge pull request #4447 from udecode/getSelectedDomFragment

Add `getSelectedDomFragment`

Author: felixfeng33

.changeset/core-patch-getSelectedDomFragment.md

@@ -0,0 +1,6 @@
+---
+'@platejs/core': patch
+---
+
+- Added `getSelectedDomFragment` utility function that returns Slate nodes from DOM selection.
+- Deprecated `getSelectedDomBlocks`. Use `getSelectedDomFragment` instead.

packages/core/src/lib/static/plugins/ViewPlugin.ts

@@ -1,8 +1,6 @@
-import type { Descendant } from '@platejs/slate';
-
 import { DOMPlugin } from '../../plugins';
 import { getPlainText } from '../internal/getPlainText';
-import { getSelectedDomBlocks } from '../utils/getSelectedDomBlocks';
+import { getSelectedDomFragment } from '../utils/getSelectedDomFragment';
 import { getSelectedDomNode } from '../utils/getSelectedDomNode';
 import { isSelectOutside } from '../utils/isSelectOutside';
 
@@ -12,29 +10,17 @@ export const ViewPlugin = DOMPlugin.overrideEditor(
       setFragmentData(data, originEvent) {
         if (originEvent !== 'copy') return setFragmentData(data, originEvent);
 
-        const domBlocks = getSelectedDomBlocks();
+        const fragment = getSelectedDomFragment(editor);
         const html = getSelectedDomNode();
 
-        if (!html || !domBlocks) return;
+        if (!html || !fragment) return;
 
         const selectOutside = isSelectOutside(html);
 
         if (selectOutside) return;
 
         // only crossing multiple blocks
-        if (domBlocks.length > 0) {
-          const fragment: Descendant[] = [];
-
-          Array.from(domBlocks).forEach((node: any) => {
-            const blockId = node.dataset.slateId;
-            const block = editor.api.node({ id: blockId, at: [] });
-
-            // prevent inline elements like link and table cells.
-            if (block && block[1].length === 1) {
-              fragment.push(block[0]);
-            }
-          });
-
+        if (fragment.length > 0) {
           const string = JSON.stringify(fragment);
           const encoded = window.btoa(encodeURIComponent(string));
 

packages/core/src/lib/static/utils/getSelectedDomBlocks.ts

@@ -1,4 +1,5 @@
 /** Get the slate nodes from the DOM selection */
+/** @deprecated use getSelectedDomFragment instead */
 export const getSelectedDomBlocks = () => {
   const selection = window.getSelection();
 

packages/core/src/lib/static/utils/getSelectedDomFragment.tsx

@@ -0,0 +1,36 @@
+import type { Descendant } from "@platejs/slate";
+
+import type { SlateEditor } from "../../editor";
+
+export const getSelectedDomFragment = (editor: SlateEditor): Descendant[] => {
+  const selection = window.getSelection();
+
+  if (!selection || selection.rangeCount === 0) return [];
+
+  const range = selection.getRangeAt(0);
+  const fragment = range.cloneContents();
+
+  const _domBlocks = fragment.querySelectorAll(
+    '[data-slate-node="element"][data-slate-id]'
+  );
+
+  const domBlocks = Array.from(_domBlocks);
+
+
+  if (domBlocks.length === 0) return [];
+
+  const nodes: Descendant[] = [];
+
+  domBlocks.forEach((node: any) => {
+    const blockId = (node as HTMLElement).dataset.slateId;
+    const block = editor.api.node({ id: blockId, at: [] });
+
+    // prevent inline elements like link and table cells.
+    if (block && block[1].length === 1) {
+      nodes.push(block[0]);
+    }
+  });
+
+
+  return nodes;
+};

packages/core/src/lib/static/utils/index.ts

@@ -6,6 +6,7 @@ export * from './createStaticString';
 export * from './getNodeDataAttributes';
 export * from './getRenderNodeStaticProps';
 export * from './getSelectedDomBlocks';
+export * from './getSelectedDomFragment';
 export * from './getSelectedDomNode';
 export * from './isSelectOutside';
 export * from './pipeDecorate';