@takeshape/util 9.32.3 → 9.33.2

package/dist/draftjs.d.ts

@@ -1,4 +1,4 @@
-import { RawDraftContentState, Entity } from 'draft-js';
+import { RawDraftContentState, Entity, RawDraftEntityRange } from 'draft-js';
 export interface Content {
     [name: string]: any;
     _id: string;
@@ -13,6 +13,34 @@ type DraftToMarkdownOptionsItems = Record<string, {
     open: (entity?: DraftEntityWithData) => string;
     close: (entity?: DraftEntityWithData) => string;
 }>;
+/**
+ * Adjust entity ranges to insert `amount` space starting at `after`.
+ * For example, take this visualization of a range with offset 5 and length 5, where
+ * the vertical bars are the start and end of the range, inclusive:
+ * -----|---|-----
+ * If you insert amount 5 after 0 you get this:
+ * ----------|---|-----
+ * If you insert amount 5 after 7 you get this:
+ * -----|--------|-----
+ * If you insert amount 5 after 10 you get this:
+ * -----|---|----------
+ * If you insert amount -2 after 7 you get this:
+ * -----|-|-----
+ */
+export declare const adjustEntityRanges: (entityRanges: RawDraftEntityRange[], after: number, amount: number) => {
+    offset: number;
+    length: number;
+    key: number;
+}[];
+/**
+ * Encode HTML entities in this draftjs state.
+ * We adjust entity ranges so that their offsets and lengths are still correct with the
+ * encoded text.
+ * EG `&#x27;` is 5 characters longer than `'` so if there is a single apostrophe before a link,
+ * the link entity's offset needs to be increased by 5 when the text is encoded.
+ * This also applies to the entity's length if there are escaped characters inside the entity.
+ */
+export declare const encodeHtmlEntities: (draftjs: RawDraftContentState) => RawDraftContentState;
 export declare function fromDraftjs(draftjs: RawDraftContentState, styleItems?: DraftToMarkdownOptionsItems, entityItems?: DraftToMarkdownOptionsItems): string;
 export declare function draftjsToMd(draftjs: RawDraftContentState, assets: Record<string, MaybeContent>): string;
 export declare function draftjsToMdx(draftjs: RawDraftContentState, assets: Record<string, MaybeContent>, prefix?: (tagName: string) => string): string;

package/dist/draftjs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"draftjs.d.ts","sourceRoot":"","sources":["../../src/draftjs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,oBAAoB,EAAwB,MAAM,EAAiB,MAAM,UAAU,CAAC;AAsB5F,MAAM,WAAW,OAAO;IACtB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/C,UAAU,mBAAoB,SAAQ,MAAM;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC5B;AA2BD,KAAK,2BAA2B,GAAG,MAAM,CACvC,MAAM,EACN;IACE,IAAI,EAAE,CAAC,MAAM,CAAC,EAAE,mBAAmB,KAAK,MAAM,CAAC;IAC/C,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,mBAAmB,KAAK,MAAM,CAAC;CACjD,CACF,CAAC;AAqDF,wBAAgB,WAAW,CACzB,OAAO,EAAE,oBAAoB,EAC7B,UAAU,CAAC,EAAE,2BAA2B,EACxC,WAAW,CAAC,EAAE,2BAA2B,GACxC,MAAM,CAyER;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,MAAM,CA0DvG;AAmBD,wBAAgB,YAAY,CAC1B,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,EACpC,MAAM,8BAAqB,GAC1B,MAAM,CAyDR;AA4MD,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,oBAAoB,CAgD7D;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAEvD;AA6ND;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAwB5D;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,oBAAoB,CA0G9D"}
+{"version":3,"file":"draftjs.d.ts","sourceRoot":"","sources":["../../src/draftjs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,oBAAoB,EAAwB,MAAM,EAAkB,mBAAmB,EAAC,MAAM,UAAU,CAAC;AAsBjH,MAAM,WAAW,OAAO;IACtB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/C,UAAU,mBAAoB,SAAQ,MAAM;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC5B;AA2BD,KAAK,2BAA2B,GAAG,MAAM,CACvC,MAAM,EACN;IACE,IAAI,EAAE,CAAC,MAAM,CAAC,EAAE,mBAAmB,KAAK,MAAM,CAAC;IAC/C,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,mBAAmB,KAAK,MAAM,CAAC;CACjD,CACF,CAAC;AAiCF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,kBAAkB,iBAAkB,mBAAmB,EAAE,SAAS,MAAM,UAAU,MAAM;;;;GASpG,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,YAAa,oBAAoB,KAAG,oBAyBlE,CAAC;AAEF,wBAAgB,WAAW,CACzB,OAAO,EAAE,oBAAoB,EAC7B,UAAU,CAAC,EAAE,2BAA2B,EACxC,WAAW,CAAC,EAAE,2BAA2B,GACxC,MAAM,CAyER;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,oBAAoB,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,MAAM,CA0DvG;AAmBD,wBAAgB,YAAY,CAC1B,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,EACpC,MAAM,8BAAqB,GAC1B,MAAM,CAyDR;AA4MD,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,oBAAoB,CAgD7D;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAEvD;AA+ND;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAwB5D;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,oBAAoB,CA0G9D"}

package/dist/draftjs.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.adjustEntityRanges = void 0;
 exports.draftjsToMd = draftjsToMd;
 exports.draftjsToMdx = draftjsToMdx;
+exports.encodeHtmlEntities = void 0;
 exports.fromDraftjs = fromDraftjs;
 exports.getImagePathFromUrl = getImagePathFromUrl;
 exports.insertBreaksAroundBlocks = insertBreaksAroundBlocks;
@@ -101,25 +103,76 @@ const handleMultiword = (markdown, marker, markdownSyntax, markdownRegex) => {
 
 const handleExternalLinks = markdown => {
   const regex = /(<TSExternalLink text="TEMPORARY_EXTERNAL_LINK_MARKER_HP3vprmERkc9ZAss" href="[^"]+">)([^<]+)<\/TSExternalLink>/g;
-  return markdown.replace(regex, (match, openTag, content) => match.replace(EXTERNAL_LINK_MARKER, (0, _escape.default)(content)));
+  return markdown.replace(regex, (match, openTag, content) => match.replace(EXTERNAL_LINK_MARKER, content));
 };
+/**
+ * Adjust entity ranges to insert `amount` space starting at `after`.
+ * For example, take this visualization of a range with offset 5 and length 5, where
+ * the vertical bars are the start and end of the range, inclusive:
+ * -----|---|-----
+ * If you insert amount 5 after 0 you get this:
+ * ----------|---|-----
+ * If you insert amount 5 after 7 you get this:
+ * -----|--------|-----
+ * If you insert amount 5 after 10 you get this:
+ * -----|---|----------
+ * If you insert amount -2 after 7 you get this:
+ * -----|-|-----
+ */
 
-const encodeHtmlEntities = draftjs => {
-  return { ...draftjs,
-    blocks: draftjs.blocks.map(block => ({ ...block,
-      text: _he.default.encode(block.text)
-    }))
-  };
+
+const adjustEntityRanges = (entityRanges, after, amount) => {
+  return entityRanges.map(entityRange => ({ ...entityRange,
+    offset: entityRange.offset > after ? entityRange.offset + amount : entityRange.offset,
+    length: entityRange.offset <= after && entityRange.offset + entityRange.length > after ? entityRange.length + amount : entityRange.length
+  }));
 };
+/**
+ * Encode HTML entities in this draftjs state.
+ * We adjust entity ranges so that their offsets and lengths are still correct with the
+ * encoded text.
+ * EG `&#x27;` is 5 characters longer than `'` so if there is a single apostrophe before a link,
+ * the link entity's offset needs to be increased by 5 when the text is encoded.
+ * This also applies to the entity's length if there are escaped characters inside the entity.
+ */
+
+
+exports.adjustEntityRanges = adjustEntityRanges;
 
-const decodeHtmlEntities = draftjs => {
-  return { ...draftjs,
-    blocks: draftjs.blocks.map(block => ({ ...block,
-      text: _he.default.decode(block.text)
-    }))
+const encodeHtmlEntities = draftjs => {
+  const result = { ...draftjs,
+    blocks: draftjs.blocks.map(block => {
+      let {
+        text
+      } = block;
+      let {
+        entityRanges
+      } = block;
+
+      for (let i = 0; i < text.length; i++) {
+        const char = text.charAt(i);
+
+        const encodedChar = _he.default.encode(char);
+
+        if (encodedChar !== char) {
+          const offset = encodedChar.length - char.length;
+          entityRanges = adjustEntityRanges(entityRanges, i, offset);
+          text = text.substring(0, i) + encodedChar + text.substring(i + 1);
+          i += offset;
+        }
+      }
+
+      return { ...block,
+        entityRanges,
+        text
+      };
+    })
   };
+  return result;
 };
 
+exports.encodeHtmlEntities = encodeHtmlEntities;
+
 function fromDraftjs(draftjs, styleItems, entityItems) {
   let markdown = (0, _markdownDraftJs.draftToMarkdown)(encodeHtmlEntities(draftjs), {
     styleItems: {
@@ -549,7 +602,7 @@ function fromMd(md, blockEntities, blockTypes) {
             lang: item.params || ''
           },
           // Using the text handling from markdown-to-draft
-          text: (item.content || '').replace(/\n$/, ''),
+          text: _he.default.decode((item.content || '').replace(/\n$/, '')),
           entityRanges: [],
           inlineStyleRanges: []
         };
@@ -703,8 +756,11 @@ function addLinks(state, links) {
         entity.type = 'LINK';
         entity.mutability = 'MUTABLE';
         entity.data = link;
-        entity.text = link.text;
-        entityRange.length += link.text.length;
+
+        const decodedText = _he.default.decode(link.text);
+
+        entity.text = decodedText;
+        entityRange.length += decodedText.length;
         linkNumber++;
       }
 
@@ -934,5 +990,5 @@ function mdxToDraftjs(mdx) {
 
     return ((_entity$data11 = entity.data) === null || _entity$data11 === void 0 ? void 0 : _entity$data11.marker) === undefined && !entityKeysToExclude.includes(Number(key));
   });
-  return decodeHtmlEntities(result);
+  return result;
 }

package/es/draftjs.js

@@ -73,25 +73,69 @@ const handleMultiword = (markdown, marker, markdownSyntax, markdownRegex) => {
 
 const handleExternalLinks = markdown => {
   const regex = /(<TSExternalLink text="TEMPORARY_EXTERNAL_LINK_MARKER_HP3vprmERkc9ZAss" href="[^"]+">)([^<]+)<\/TSExternalLink>/g;
-  return markdown.replace(regex, (match, openTag, content) => match.replace(EXTERNAL_LINK_MARKER, escape(content)));
+  return markdown.replace(regex, (match, openTag, content) => match.replace(EXTERNAL_LINK_MARKER, content));
 };
+/**
+ * Adjust entity ranges to insert `amount` space starting at `after`.
+ * For example, take this visualization of a range with offset 5 and length 5, where
+ * the vertical bars are the start and end of the range, inclusive:
+ * -----|---|-----
+ * If you insert amount 5 after 0 you get this:
+ * ----------|---|-----
+ * If you insert amount 5 after 7 you get this:
+ * -----|--------|-----
+ * If you insert amount 5 after 10 you get this:
+ * -----|---|----------
+ * If you insert amount -2 after 7 you get this:
+ * -----|-|-----
+ */
 
-const encodeHtmlEntities = draftjs => {
-  return { ...draftjs,
-    blocks: draftjs.blocks.map(block => ({ ...block,
-      text: he.encode(block.text)
-    }))
-  };
+
+export const adjustEntityRanges = (entityRanges, after, amount) => {
+  return entityRanges.map(entityRange => ({ ...entityRange,
+    offset: entityRange.offset > after ? entityRange.offset + amount : entityRange.offset,
+    length: entityRange.offset <= after && entityRange.offset + entityRange.length > after ? entityRange.length + amount : entityRange.length
+  }));
 };
+/**
+ * Encode HTML entities in this draftjs state.
+ * We adjust entity ranges so that their offsets and lengths are still correct with the
+ * encoded text.
+ * EG `&#x27;` is 5 characters longer than `'` so if there is a single apostrophe before a link,
+ * the link entity's offset needs to be increased by 5 when the text is encoded.
+ * This also applies to the entity's length if there are escaped characters inside the entity.
+ */
 
-const decodeHtmlEntities = draftjs => {
-  return { ...draftjs,
-    blocks: draftjs.blocks.map(block => ({ ...block,
-      text: he.decode(block.text)
-    }))
+export const encodeHtmlEntities = draftjs => {
+  const result = { ...draftjs,
+    blocks: draftjs.blocks.map(block => {
+      let {
+        text
+      } = block;
+      let {
+        entityRanges
+      } = block;
+
+      for (let i = 0; i < text.length; i++) {
+        const char = text.charAt(i);
+        const encodedChar = he.encode(char);
+
+        if (encodedChar !== char) {
+          const offset = encodedChar.length - char.length;
+          entityRanges = adjustEntityRanges(entityRanges, i, offset);
+          text = text.substring(0, i) + encodedChar + text.substring(i + 1);
+          i += offset;
+        }
+      }
+
+      return { ...block,
+        entityRanges,
+        text
+      };
+    })
   };
+  return result;
 };
-
 export function fromDraftjs(draftjs, styleItems, entityItems) {
   let markdown = draftToMarkdown(encodeHtmlEntities(draftjs), {
     styleItems: {
@@ -520,7 +564,7 @@ function fromMd(md, blockEntities, blockTypes) {
             lang: item.params || ''
           },
           // Using the text handling from markdown-to-draft
-          text: (item.content || '').replace(/\n$/, ''),
+          text: he.decode((item.content || '').replace(/\n$/, '')),
           entityRanges: [],
           inlineStyleRanges: []
         };
@@ -673,8 +717,9 @@ function addLinks(state, links) {
         entity.type = 'LINK';
         entity.mutability = 'MUTABLE';
         entity.data = link;
-        entity.text = link.text;
-        entityRange.length += link.text.length;
+        const decodedText = he.decode(link.text);
+        entity.text = decodedText;
+        entityRange.length += decodedText.length;
         linkNumber++;
       }
 
@@ -903,5 +948,5 @@ export function mdxToDraftjs(mdx) {
 
     return ((_entity$data11 = entity.data) === null || _entity$data11 === void 0 ? void 0 : _entity$data11.marker) === undefined && !entityKeysToExclude.includes(Number(key));
   });
-  return decodeHtmlEntities(result);
+  return result;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takeshape/util",
-  "version": "9.32.3",
+  "version": "9.33.2",
   "description": "Shared utilities",
   "homepage": "https://www.takeshape.io",
   "repository": {
@@ -32,7 +32,7 @@
     "prismjs": "^1.25.0",
     "shortid": "^2.2.16",
     "url-parse": "^1.5.3",
-    "@takeshape/routing": "9.32.3"
+    "@takeshape/routing": "9.33.2"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.9",
@@ -45,7 +45,7 @@
     "@types/prismjs": "^1.16.2",
     "@types/shortid": "^0.0.29",
     "stripe": "8.81.0",
-    "@takeshape/typescript-jest-junit-reporter": "9.32.3"
+    "@takeshape/typescript-jest-junit-reporter": "9.33.2"
   },
   "engines": {
     "node": ">=16"