@takeshape/util 8.16.0 → 8.20.2

package/es/get-image-url.js

@@ -0,0 +1,8 @@
+import { getImageUrl as imageUrl } from '@takeshape/routing';
+export function getImageUrl(path, defaultImageConfig, imageBaseUrl, config) {
+  return imageUrl(path, { ...defaultImageConfig,
+    ...config
+  }, {
+    baseUrl: imageBaseUrl
+  });
+}

package/es/highlight-code.js

@@ -0,0 +1,27 @@
+/*
+ * The intention is to move all this to the client package in the end, but right now it's here
+ * to be shared between the draftjs / mdx implementations, which span the client / server differently.
+ */
+import Prism from 'prismjs';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markup-templating';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-django';
+import 'prismjs/components/prism-twig';
+import 'prismjs/components/prism-yaml';
+import 'prismjs/components/prism-graphql';
+import 'prismjs/components/prism-sass';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-json';
+import escape from 'lodash/escape';
+export const highlightCode = (code, lang) => {
+  if (lang) {
+    const syntax = Prism.languages[lang];
+    return Prism.highlight(code, syntax, lang);
+  }
+
+  return escape(code);
+};

package/es/templates.js

@@ -0,0 +1,97 @@
+/*
+ * The intention is to move all this to the client package in the end, but right now it's here
+ * to be shared between the draftjs / mdx implementations, which span the client / server differently.
+ */
+import classnames from 'classnames';
+import { highlightCode } from './highlight-code';
+import escape from 'lodash/escape';
+import { getImageUrl } from '@takeshape/routing';
+export function getApplyPrefix(prefix) {
+  return className => className ? prefix + className : '';
+}
+export function attrs(obj) {
+  const attrStrings = [];
+  const attrNames = Object.keys(obj);
+  attrNames.sort();
+
+  for (const attrName of attrNames) {
+    const value = obj[attrName];
+
+    if (value) {
+      attrStrings.push(`${attrName}="${escape(value)}"`);
+    }
+  }
+
+  return attrStrings.length ? ' ' + attrStrings.join(' ') : '';
+}
+export function imageTemplate(applyPrefix, data) {
+  var _data$link;
+
+  const {
+    caption,
+    credit,
+    alignment,
+    size,
+    asset,
+    imageParams
+  } = data;
+
+  if (!asset) {
+    return '';
+  }
+
+  const imageUrl = getImageUrl(asset.path, imageParams);
+  let figCaption = '';
+
+  if (caption || credit) {
+    const htmlCaption = caption ? `<span class="${applyPrefix('caption')}">${caption}</span>` : '';
+    const htmlCredit = credit ? `<span class="${applyPrefix('credit')}">${credit}</span>` : '';
+    figCaption = `<figcaption>${htmlCaption} ${htmlCredit}</figcaption>`;
+  }
+
+  const classes = classnames(applyPrefix(alignment), applyPrefix(size));
+  const classAttr = classes ? ` class="${classes}"` : '';
+  const imgAttrs = attrs({
+    alt: asset.description,
+    title: asset.title
+  });
+  let image = `<img${imgAttrs} src="${imageUrl}"/>`;
+
+  if ((_data$link = data.link) !== null && _data$link !== void 0 && _data$link.url) {
+    const target = data.link.external ? ' target="blank" rel="noopener noreferrer"' : '';
+    image = `<a href="${data.link.url}"${target}>${image}</a>`;
+  }
+
+  return `<figure${classAttr}>${image}${figCaption}</figure>`;
+}
+
+function renderMdx(tag, attributes, data, children) {
+  const tagWithAttributes = `${tag} ${attributes.map(attr => `${attr}="${escape(data[attr])}"`).join(' ')}`;
+
+  if (children) {
+    return `<${tagWithAttributes}>
+${children.replace(/[\n\r]+$/, '')}
+</${tag}>`;
+  }
+
+  return `<${tagWithAttributes}/>`;
+}
+
+export function imageTemplateMdx(applyPrefix, data) {
+  return renderMdx(applyPrefix('Image'), ['id', 'caption', 'credit', 'link', 'linkisexternal', 'alignment', 'size', 'src'], data);
+}
+export function oembedTemplate(applyPrefix, data) {
+  return `<div class="${applyPrefix('oembed')}">${data.html}</div>`;
+}
+export function oembedTemplateMdx(applyPrefix, data) {
+  return renderMdx(applyPrefix('Oembed'), ['url', 'author_name', 'author_url', 'width', 'height', 'type', 'cache_age', 'provider_name', 'version'], data, data.html);
+}
+export function codeTemplate(applyPrefix, data) {
+  const {
+    text,
+    lang
+  } = data;
+  const code = highlightCode(text, lang);
+  const langClass = lang ? ` class="${applyPrefix(`language-${lang}`)}"` : '';
+  return `<pre><code${langClass}>${code}</code></pre>`;
+}

package/lib/common.d.ts

@@ -12,4 +12,7 @@ export * from './tracing';
 export * from './merge';
 export * from './map';
 export * from './visit';
+export * from './draftjs';
+export * from './templates';
+export * from './highlight-code';
 //# sourceMappingURL=common.d.ts.map

package/lib/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/common.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/common.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}

package/lib/common.js

@@ -184,4 +184,43 @@ Object.keys(_visit).forEach(function (key) {
       return _visit[key];
     }
   });
+});
+
+var _draftjs = require("./draftjs");
+
+Object.keys(_draftjs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _draftjs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _draftjs[key];
+    }
+  });
+});
+
+var _templates = require("./templates");
+
+Object.keys(_templates).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _templates[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _templates[key];
+    }
+  });
+});
+
+var _highlightCode = require("./highlight-code");
+
+Object.keys(_highlightCode).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _highlightCode[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _highlightCode[key];
+    }
+  });
 });

package/lib/draftjs-templates.d.ts

@@ -0,0 +1,47 @@
+import { RawDraftContentBlock } from 'draft-js';
+export interface DraftjsTemplateResult {
+    contentBlock: RawDraftContentBlock;
+    entities: any;
+}
+export interface DraftjsLinkOpenParams {
+    text: string;
+    href: string;
+    depth: number;
+    key: number;
+    offset: number;
+}
+export interface DraftjsImageParams {
+    captionText: string;
+    creditText: string;
+    alignment?: string;
+    size?: string;
+    assetId: string;
+    linkUrl: string;
+    linkIsExternal: boolean;
+    depth: number;
+    key: number;
+    path: string;
+}
+export declare const getDraftjsImage: (params: DraftjsImageParams) => DraftjsTemplateResult | undefined;
+export interface DraftjsPullquoteParams {
+    text: string;
+    depth: number;
+}
+export declare const getDraftjsPullquote: (params: DraftjsPullquoteParams) => DraftjsTemplateResult;
+export interface DraftjsOembedParams {
+    html: string;
+    depth: number;
+    key: number;
+    width?: number;
+    height?: number;
+    url?: string;
+    author_name?: string;
+    author_url?: string;
+    type?: string;
+    cache_age?: number;
+    provider_name?: string;
+    provider_url?: string;
+    version?: string;
+}
+export declare const getDraftjsOembed: (params: DraftjsOembedParams) => DraftjsTemplateResult;
+//# sourceMappingURL=draftjs-templates.d.ts.map

package/lib/draftjs-templates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draftjs-templates.d.ts","sourceRoot":"","sources":["../../src/draftjs-templates.ts"],"names":[],"mappings":"AAKA,OAAO,EAAC,oBAAoB,EAAC,MAAM,UAAU,CAAC;AAG9C,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,oBAAoB,CAAC;IACnC,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,eAAe,WAAY,kBAAkB,KAAG,qBAAqB,GAAG,SAmEpF,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,mBAAmB,WAAY,sBAAsB,KAAG,qBAcpE,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,gBAAgB,WAAY,mBAAmB,KAAG,qBAsD9D,CAAC"}

package/lib/draftjs-templates.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDraftjsPullquote = exports.getDraftjsOembed = exports.getDraftjsImage = void 0;
+
+var _shortid = _interopRequireDefault(require("shortid"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable camelcase */
+
+/*
+ * The intention is to move all this to the client package in the end, but right now it's here
+ * to be shared between the draftjs / mdx implementations, which span the client / server differently.
+ */
+const getDraftjsImage = params => {
+  const {
+    captionText,
+    creditText,
+    alignment,
+    size,
+    assetId,
+    linkUrl,
+    linkIsExternal,
+    depth,
+    key,
+    path
+  } = params;
+
+  const blockKey = _shortid.default.generate();
+
+  return {
+    contentBlock: {
+      key: _shortid.default.generate(),
+      text: ' ',
+      type: 'atomic',
+      depth,
+      inlineStyleRanges: [],
+      entityRanges: [{
+        offset: 0,
+        length: 1,
+        key
+      }],
+      data: {}
+    },
+    entities: {
+      [key]: {
+        type: 'image',
+        mutability: 'IMMUTABLE',
+        data: {
+          id: assetId,
+          path,
+          caption: {
+            blocks: [{
+              key: blockKey,
+              text: captionText,
+              type: 'unstyled',
+              depth,
+              inlineStyleRanges: [],
+              entityRanges: [],
+              data: {}
+            }],
+            entityMap: {}
+          },
+          credit: {
+            blocks: [{
+              key: blockKey,
+              text: creditText,
+              type: 'unstyled',
+              depth,
+              inlineStyleRanges: [],
+              entityRanges: [],
+              data: {}
+            }],
+            entityMap: {}
+          },
+          link: {
+            url: linkUrl,
+            external: linkIsExternal
+          },
+          alignment,
+          size,
+          contentTypeId: 'ASSET'
+        }
+      }
+    }
+  };
+};
+
+exports.getDraftjsImage = getDraftjsImage;
+
+const getDraftjsPullquote = params => {
+  const {
+    text,
+    depth
+  } = params;
+  return {
+    contentBlock: {
+      key: _shortid.default.generate(),
+      text,
+      type: 'pullquote',
+      depth,
+      inlineStyleRanges: [],
+      entityRanges: [],
+      data: {}
+    },
+    entities: {}
+  };
+};
+
+exports.getDraftjsPullquote = getDraftjsPullquote;
+
+const getDraftjsOembed = params => {
+  const {
+    key,
+    depth,
+    html,
+    width = 550,
+    height = undefined,
+    url = undefined,
+    author_name = undefined,
+    author_url = undefined,
+    type = undefined,
+    cache_age = undefined,
+    provider_name = undefined,
+    provider_url = undefined,
+    version = undefined
+  } = params;
+  return {
+    contentBlock: {
+      key: _shortid.default.generate(),
+      text: ' ',
+      type: 'atomic',
+      depth,
+      inlineStyleRanges: [],
+      entityRanges: [{
+        offset: 0,
+        length: 1,
+        key
+      }],
+      data: {}
+    },
+    // Only html is required
+    entities: {
+      [key]: {
+        type: 'oembed',
+        mutability: 'IMMUTABLE',
+        data: {
+          url,
+          author_name,
+          author_url,
+          html,
+          width,
+          height,
+          type,
+          cache_age,
+          provider_name,
+          provider_url,
+          version
+        }
+      }
+    }
+  };
+};
+
+exports.getDraftjsOembed = getDraftjsOembed;

package/lib/draftjs.d.ts

@@ -0,0 +1,27 @@
+import { RawDraftContentState, Entity } from 'draft-js';
+export interface Content {
+    [name: string]: any;
+    _id: string;
+}
+export declare type MaybeContent = Content | undefined;
+interface DraftEntityWithData extends Entity {
+    type?: string;
+    mutability?: string;
+    data?: Record<string, any>;
+}
+declare type DraftToMarkdownOptionsItems = Record<string, {
+    open: (entity?: DraftEntityWithData) => string;
+    close: (entity?: DraftEntityWithData) => string;
+}>;
+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;
+export declare function mdToDraftjs(mdx: string): RawDraftContentState;
+export declare function getImagePathFromUrl(url: string): string;
+/**
+ * Make sure there is a place to put the cursor around block-level items such as images and oembeds
+ */
+export declare function insertBreaksAroundBlocks(mdx: string): string;
+export declare function mdxToDraftjs(mdx: string): RawDraftContentState;
+export {};
+//# sourceMappingURL=draftjs.d.ts.map

package/lib/draftjs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"draftjs.d.ts","sourceRoot":"","sources":["../../src/draftjs.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,oBAAoB,EAAwB,MAAM,EAAiB,MAAM,UAAU,CAAC;AAqB5F,MAAM,WAAW,OAAO;IACtB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,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,aAAK,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,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;AAoMD;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAoB5D;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,oBAAoB,CA0G9D"}