Skip to content

fix: make copy slice metadata hidden #3232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VladaHarbour wants to merge 1 commit into
base: main
Choose a base branch
from
+35 −11
Open

fix: make copy slice metadata hidden #3232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 16 additions & 11 deletions packages/super-editor/src/editors/v1/core/helpers/superdocClipboardSlice.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,24 +250,32 @@ export function bodySectPrShouldEmbed(bodySectPr) {
return !!(cols?.count && cols.count > 1);
}

/** Embeds PM slice, media, and optional body sectPr as hidden base64 payloads. */
function hiddenClipboardPayload(attr, base64) {
return `<div ${attr}="${base64}" style="display:none"></div>`;
}

function readClipboardPayload(el, attr) {
return el.getAttribute(attr)?.trim() || el.textContent?.trim() || '';
}

/** Embeds PM slice, media, and optional body sectPr as hidden base64 payload attributes. */
export function embedSliceInHtml(html, sliceJson, bodySectPrJson = '', mediaJson = '') {
let out = html;
if (bodySectPrJson) {
const body64 = encodeUtf8Base64(bodySectPrJson);
out = `<div ${SUPERDOC_BODY_SECT_PR_ATTR} style="display:none">${body64}</div>${out}`;
out = `${hiddenClipboardPayload(SUPERDOC_BODY_SECT_PR_ATTR, body64)}${out}`;
}
if (mediaJson) {
const media64 = encodeUtf8Base64(mediaJson);
out = `<div ${SUPERDOC_MEDIA_ATTR} style="display:none">${media64}</div>${out}`;
out = `${hiddenClipboardPayload(SUPERDOC_MEDIA_ATTR, media64)}${out}`;
}
if (!sliceJson) return out;
const base64 = encodeUtf8Base64(sliceJson);
return `<div ${SUPERDOC_SLICE_ATTR} style="display:none">${base64}</div>${out}`;
return `${hiddenClipboardPayload(SUPERDOC_SLICE_ATTR, base64)}${out}`;
}

/**
* Reads slice JSON from HTML produced by {@link embedSliceInHtml} (hidden div + base64 text).
* Reads slice JSON from HTML produced by {@link embedSliceInHtml}.
*/
export function extractSliceFromHtml(html) {
if (!html || !html.includes(SUPERDOC_SLICE_ATTR)) return null;
Expand All @@ -278,10 +286,7 @@ export function extractSliceFromHtml(html) {
const el = doc.querySelector(`[${SUPERDOC_SLICE_ATTR}]`);
if (!el) return null;

let b64 = el.textContent?.trim() ?? '';
if (!b64) {
b64 = el.getAttribute(SUPERDOC_SLICE_ATTR)?.trim() ?? '';
}
const b64 = readClipboardPayload(el, SUPERDOC_SLICE_ATTR);
if (!b64) return null;

const decoded = decodeUtf8Base64(b64);
Expand Down Expand Up @@ -314,7 +319,7 @@ export function extractMediaFromHtml(html) {
const doc = new DOMParser().parseFromString(html, 'text/html');
const el = doc.querySelector(`[${SUPERDOC_MEDIA_ATTR}]`);
if (!el) return null;
const b64 = el.textContent?.trim() ?? '';
const b64 = readClipboardPayload(el, SUPERDOC_MEDIA_ATTR);
if (!b64) return null;
const decoded = decodeUtf8Base64(b64);
return decoded || null;
Expand All @@ -331,7 +336,7 @@ export function extractBodySectPrFromHtml(html) {
const doc = new DOMParser().parseFromString(html, 'text/html');
const el = doc.querySelector(`[${SUPERDOC_BODY_SECT_PR_ATTR}]`);
if (!el) return null;
const b64 = el.textContent?.trim() ?? '';
const b64 = readClipboardPayload(el, SUPERDOC_BODY_SECT_PR_ATTR);
if (!b64) return null;
return JSON.parse(decodeUtf8Base64(b64));
} catch {
Expand Down
19 changes: 19 additions & 0 deletions packages/super-editor/src/editors/v1/core/helpers/superdocClipboardSlice.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,25 @@ describe('HTML slice embed/extract round-trip', () => {
expect(extracted).toBe(sampleSlice);
});

it('stores embedded payloads in attributes instead of hidden text nodes', () => {
const mediaJson = JSON.stringify({ 'word/media/image1.png': 'data:image/png;base64,AAA' });
const embedded = embedSliceInHtml(sampleHtml, sampleSlice, '', mediaJson);

expect(embedded).toMatch(/<div data-superdoc-slice="[^"]+" style="display:none"><\/div>/);
expect(embedded).toMatch(/<div data-sd-superdoc-media="[^"]+" style="display:none"><\/div>/);
expect(embedded).not.toMatch(/<div[^>]*data-superdoc-slice[^>]*>[^<]+<\/div>/);
expect(embedded).not.toMatch(/<div[^>]*data-sd-superdoc-media[^>]*>[^<]+<\/div>/);
});

it('extractSliceFromHtml still supports older hidden text payloads', () => {
const embedded = embedSliceInHtml(sampleHtml, sampleSlice);
const payload = embedded.match(/data-superdoc-slice="([^"]+)"/)?.[1];
expect(payload).toBeTruthy();

const oldFormatHtml = `<div data-superdoc-slice style="display:none">${payload}</div>${sampleHtml}`;
expect(extractSliceFromHtml(oldFormatHtml)).toBe(sampleSlice);
});

it('extractMediaFromHtml recovers embedded media JSON', () => {
const mediaJson = JSON.stringify({ 'word/media/image1.png': 'data:image/png;base64,AAA' });
const embedded = embedSliceInHtml(sampleHtml, sampleSlice, '', mediaJson);
Expand Down
Loading