Extract and import text content of documents and blocks

.changeset/olive-berries-work.md

@@ -0,0 +1,7 @@
+---
+"@comet/blocks-admin": minor
+"@comet/cms-admin": minor
+"@comet/admin": minor
+---
+
+Add the method `extractTextContents` to extract text contents of blocks and `replaceTextContents` to import and replace text contents of blocks. These two methods are accessible through two new page actions `Extract Content` and `Import Content` from the page menu. `Extract content` inserts the text content of the blocks as csv into the clipboard and `Import content` takes csv data from the clipboard and replaces the respective texts in blocks. To ensure that inline styles and entity ranges are preserved during import, they are marked with corresponding tags during export.

demo/admin/src/common/blocks/HeadlineBlock.tsx

@@ -32,6 +32,7 @@ export const HeadlineBlock = createCompositeBlock(
                             <Field name="eyebrow" label="Eyebrow" component={FinalFormInput} fullWidth />
                         </BlocksFinalForm>
                     ),
+                    extractTextContent: true,
                 }),
             },
             headline: {

demo/admin/src/pages/Page.tsx

@@ -61,4 +61,26 @@ export const Page: DocumentInterface<Pick<GQLPage, "content" | "seo">, GQLPageIn
     menuIcon: File,
     hideInMenuIcon: FileNotMenu,
     anchors: (input) => PageContentBlock.anchors?.(PageContentBlock.input2State(input.content)) ?? [],
+    extractTextContents: (input) => [
+        ...(PageContentBlock.extractTextContents?.(PageContentBlock.input2State(input.content)) ?? []),
+        ...(SeoBlock.extractTextContents?.(SeoBlock.input2State(input.seo)) ?? []),
+    ],
+    replaceTextContents: (input, contents) => {
+        let contentState = PageContentBlock.input2State(input.content);
+
+        if (PageContentBlock.replaceTextContents) {
+            contentState = PageContentBlock.replaceTextContents(contentState, contents);
+        }
+
+        let seoState = SeoBlock.input2State(input.seo);
+
+        if (SeoBlock.replaceTextContents) {
+            seoState = SeoBlock.replaceTextContents(seoState, contents);
+        }
+
+        return {
+            content: PageContentBlock.state2Output(contentState),
+            seo: SeoBlock.state2Output(seoState),
+        };
+    },
 };

packages/admin/admin-rte/package.json

@@ -37,21 +37,29 @@
         "@mui/icons-material": "^5.0.0",
         "@mui/material": "^5.0.0",
         "@mui/styles": "^5.0.0",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^12.0.0",
         "@types/draft-js": "^0.11.10",
         "@types/immutable": "^3.8.7",
+        "@types/jest": "^29.5.0",
         "@types/react": "^17.0.0",
         "@types/react-dom": "^17.0.0",
+        "@types/uuid": "^9.0.2",
         "draft-js": "^0.11.4",
         "eslint": "^8.0.0",
         "final-form": "^4.16.1",
+        "jest": "^29.5.0",
+        "jest-environment-jsdom": "^29.5.0",
+        "jest-junit": "^15.0.0",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.0.0",
         "react": "^17.0",
         "react-dom": "^17.0",
         "react-final-form": "^6.3.1",
         "react-intl": "^5.10.0",
         "rimraf": "^3.0.2",
-        "typescript": "^4.0.0"
+        "typescript": "^4.0.0",
+        "uuid": "^9.0.0"
     },
     "peerDependencies": {
         "@mui/icons-material": "^5.0.0",

packages/admin/admin-rte/src/core/xml/getEntityRanges.ts

@@ -0,0 +1,100 @@
+import type { CharacterMetadata } from "draft-js";
+import type { List } from "immutable";
+import { is, OrderedSet } from "immutable";
+
+type EntityKey = string | undefined | null;
+type Style = OrderedSet<string>;
+type StyleRangeWithId = [string, { style: string; id: number }[]];
+type StyleRange = [string, Style];
+type EntityRange = [EntityKey, Array<StyleRangeWithId>];
+export type CharacterMetaList = List<CharacterMetadata>;
+
+export const EMPTY_SET: Style = OrderedSet();
+
+/*
+    This implementation is inspired by https://github.com/jpuri/draftjs-to-html.
+*/
+export default function getEntityRanges(text: string, charMetaList: CharacterMetaList): EntityRange[] {
+    let charEntity: EntityKey = null;
+    let prevCharEntity: EntityKey = null;
+    const ranges: Array<EntityRange> = [];
+    let rangeStart = 0;
+    let lastStyle = null;
+    // the id is used for the pseudotags
+    let styleId = 0;
+
+    for (let i = 0, len = text.length; i < len; i++) {
+        prevCharEntity = charEntity;
+        const meta: CharacterMetadata = charMetaList.get(i);
+        charEntity = meta ? meta.getEntity() : null;
+
+        if (i > 0 && charEntity !== prevCharEntity) {
+            /* Styles are always within entities */
+            const styleRanges = getStyleRanges(text.slice(rangeStart, i), charMetaList.slice(rangeStart, i), lastStyle, styleId);
+            styleId = styleRanges.styleId;
+            ranges.push([prevCharEntity, styleRanges.styleRanges]);
+            rangeStart = i;
+            lastStyle = ranges[ranges.length - 1];
+        }
+    }
+
+    ranges.push([charEntity, getStyleRanges(text.slice(rangeStart), charMetaList.slice(rangeStart), lastStyle, styleId).styleRanges]);
+
+    return ranges;
+}
+
+function getStyleRanges(
+    text: string,
+    charMetaList: Immutable.Iterable<number, CharacterMetadata>,
+    lastStyle: EntityRange | null,
+    styleId: number,
+): { styleRanges: StyleRangeWithId[]; styleId: number } {
+    let charStyle = EMPTY_SET;
+    let prevCharStyle = charStyle;
+    const ranges: StyleRange[] = [];
+    let rangeStart = 0;
+
+    /* The start and end of an entity always mark a single range.
+If a style range starts before an entity range and extends into it, the last style must be used here, otherwise it will be interpreted as a new style range. */
+    const lastPreviousStyleRange = lastStyle ? lastStyle[1][lastStyle[1].length - 1][1] : [];
+
+    for (let i = 0, len = text.length; i < len; i++) {
+        prevCharStyle = charStyle;
+        const meta = charMetaList.get(i);
+        charStyle = meta ? meta.getStyle() : EMPTY_SET;
+
+        if (i > 0 && !is(charStyle, prevCharStyle)) {
+            ranges.push([text.slice(rangeStart, i), prevCharStyle]);
+            rangeStart = i;
+        }
+    }
+    ranges.push([text.slice(rangeStart), charStyle]);
+
+    const styleRangesWithIds: [string, { style: string; id: number }[]][] = [];
+
+    // This adds ids to the styles to identify related styling tags in export
+    for (let i = 0; i < ranges.length; i++) {
+        const stylesArray = ranges[i][1].toArray();
+
+        const styles = stylesArray.map((style) => {
+            // when entity ranges are in the text, the text is split up at their positions, therefore it's needed to look at the previous style
+            const enduringStyle = lastPreviousStyleRange.find((item) => item.style === style);
+
+            if (enduringStyle && ranges[i - 1]?.[1].toArray().length !== 0) {
+                return { style, id: enduringStyle.id };
+            } else if (i > 0 && ranges[i - 1][1].toArray().includes(style)) {
+                const previousStyle = styleRangesWithIds[i - 1][1].find((previousStyle) => previousStyle.style === style);
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                return { style, id: previousStyle!.id };
+            }
+
+            styleId += 1;
+
+            return { style, id: styleId };
+        });
+
+        styleRangesWithIds.push([ranges[i][0], styles]);
+    }
+
+    return { styleRanges: styleRangesWithIds, styleId };
+}