tinacms 0.56.3 → 0.57.0

package/dist/rich-text.d.ts

@@ -0,0 +1,118 @@
+/**
+Copyright 2021 Forestry.io Holdings, Inc.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+declare type BaseComponents = {
+    h1?: {
+        children: JSX.Element;
+    };
+    h2?: {
+        children: JSX.Element;
+    };
+    h3?: {
+        children: JSX.Element;
+    };
+    h4?: {
+        children: JSX.Element;
+    };
+    h5?: {
+        children: JSX.Element;
+    };
+    h6?: {
+        children: JSX.Element;
+    };
+    p?: {
+        children: JSX.Element;
+    };
+    a?: {
+        url: string;
+        children: JSX.Element;
+    };
+    italic?: {
+        children: JSX.Element;
+    };
+    bold?: {
+        children: JSX.Element;
+    };
+    strikethrough?: {
+        children: JSX.Element;
+    };
+    underline?: {
+        children: JSX.Element;
+    };
+    code?: {
+        children: JSX.Element;
+    };
+    ul?: {
+        children: JSX.Element;
+    };
+    ol?: {
+        children: JSX.Element;
+    };
+    block_quote?: {
+        children: JSX.Element;
+    };
+    code_block?: {
+        language?: string;
+        children: JSX.Element;
+    };
+    img?: {
+        url: string;
+        caption?: string;
+        alt?: string;
+    };
+    hr?: {};
+    component_missing?: {
+        name: string;
+    };
+};
+declare type BaseComponentSignature = {
+    [BK in keyof BaseComponents]: (props: BaseComponents[BK]) => JSX.Element;
+};
+/**
+ * Define the allowed components and their props
+ * ```ts
+ * const components:
+ * Components<{
+ *  BlockQuote: {
+ *      children: TinaMarkdownContent;
+ *      authorName: string;
+ *    };
+ *  }> = {
+ *    BlockQuote: (props: {
+ *      children: TinaMarkdownContent;
+ *      authorName: string;
+ *    }) => {
+ *      return (
+ *        <div>
+ *          <blockquote>
+ *            <TinaMarkdown content={props.children} />
+ *            {props.authorName}
+ *          </blockquote>
+ *        </div>
+ *      );
+ *    }
+ *  }
+ * }
+ * ```
+ */
+export declare type Components<ComponentAndProps extends object> = {
+    [K in keyof ComponentAndProps]: (props: ComponentAndProps[K]) => JSX.Element;
+} & BaseComponentSignature;
+export declare type TinaMarkdownContent = {
+    type: string;
+    children: TinaMarkdownContent[];
+};
+export declare const TinaMarkdown: ({ content, components, }: {
+    content: TinaMarkdownContent | TinaMarkdownContent[];
+    components?: Components<{}>;
+}) => JSX.Element;
+export {};

package/dist/rich-text.es.js

@@ -0,0 +1,192 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React from "react";
+const TinaMarkdown = ({
+  content,
+  components = {}
+}) => {
+  if (!content) {
+    return null;
+  }
+  const nodes = Array.isArray(content) ? content : content.children;
+  if (!nodes) {
+    console.log(`Expected to find structured content for TinaMarkdown`);
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, nodes.map((child) => {
+    const _a = child, { children } = _a, props = __objRest(_a, ["children"]);
+    switch (child.type) {
+      case "h1":
+      case "h2":
+      case "h3":
+      case "h4":
+      case "h5":
+      case "h6":
+      case "p":
+      case "blockquote":
+      case "ol":
+      case "ul":
+      case "li":
+        if (components[child.type]) {
+          const Component2 = components[child.type];
+          return /* @__PURE__ */ React.createElement(Component2, __spreadProps(__spreadValues({}, props), {
+            childrenRaw: children
+          }), /* @__PURE__ */ React.createElement(TinaMarkdown, {
+            components,
+            content: children
+          }));
+        }
+        return React.createElement(child.type, {
+          children: /* @__PURE__ */ React.createElement(TinaMarkdown, {
+            components,
+            content: children
+          })
+        });
+      case "lic":
+        return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+          components,
+          content: child.children
+        }));
+      case "img":
+        if (components[child.type]) {
+          const Component2 = components[child.type];
+          return /* @__PURE__ */ React.createElement(Component2, __spreadValues({}, props));
+        }
+        return /* @__PURE__ */ React.createElement("img", {
+          src: child.url,
+          alt: child.caption
+        });
+      case "a":
+        if (components[child.type]) {
+          const Component2 = components[child.type];
+          return /* @__PURE__ */ React.createElement(Component2, __spreadValues({}, props), /* @__PURE__ */ React.createElement(TinaMarkdown, {
+            components,
+            content: children
+          }));
+        }
+        return /* @__PURE__ */ React.createElement("a", {
+          href: child.url
+        }, /* @__PURE__ */ React.createElement(TinaMarkdown, {
+          components,
+          content: children
+        }));
+      case "code_block":
+        const value = child.children.map((item) => {
+          return item.children[0].text;
+        }).join("\n");
+        if (components[child.type]) {
+          const Component2 = components[child.type];
+          return /* @__PURE__ */ React.createElement(Component2, __spreadProps(__spreadValues({}, props), {
+            childrenRaw: children
+          }), value);
+        }
+        return /* @__PURE__ */ React.createElement("pre", null, /* @__PURE__ */ React.createElement("code", null, value));
+      case "hr":
+        if (components[child.type]) {
+          const Component2 = components[child.type];
+          return /* @__PURE__ */ React.createElement(Component2, __spreadValues({}, props));
+        }
+        return /* @__PURE__ */ React.createElement("hr", null);
+      case "text":
+        return /* @__PURE__ */ React.createElement(Leaf, __spreadValues({
+          components
+        }, child));
+      case "mdxJsxTextElement":
+      case "mdxJsxFlowElement":
+        const Component = components[child.name];
+        if (Component) {
+          const props2 = child.props ? child.props : {};
+          return /* @__PURE__ */ React.createElement(Component, __spreadValues({}, props2));
+        } else {
+          const ComponentMissing = components["component_missing"];
+          if (ComponentMissing) {
+            return /* @__PURE__ */ React.createElement(ComponentMissing, {
+              name: child.name
+            });
+          } else {
+            throw new Error(`No component provided for ${child.name}`);
+          }
+        }
+      default:
+        if (typeof child.text === "string") {
+          return /* @__PURE__ */ React.createElement(Leaf, __spreadValues({
+            components
+          }, child));
+        }
+        console.log(`No tina renderer for ${child.type}`, child);
+    }
+  }));
+};
+const Leaf = (props) => {
+  if (props.bold) {
+    const _a = props, { bold } = _a, rest = __objRest(_a, ["bold"]);
+    if (props.components.bold) {
+      const Component = props.components.bold;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, __spreadValues({}, rest)));
+    }
+    return /* @__PURE__ */ React.createElement("strong", null, /* @__PURE__ */ React.createElement(Leaf, __spreadValues({}, rest)));
+  }
+  if (props.italic) {
+    const _b = props, { italic } = _b, rest = __objRest(_b, ["italic"]);
+    if (props.components.italic) {
+      const Component = props.components.italic;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, __spreadValues({}, rest)));
+    }
+    return /* @__PURE__ */ React.createElement("em", null, /* @__PURE__ */ React.createElement(Leaf, __spreadValues({}, rest)));
+  }
+  if (props.underline) {
+    const _c = props, { underline } = _c, rest = __objRest(_c, ["underline"]);
+    if (props.components.underline) {
+      const Component = props.components.underline;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, __spreadValues({}, rest)));
+    }
+    return /* @__PURE__ */ React.createElement("u", null, /* @__PURE__ */ React.createElement(Leaf, __spreadValues({}, rest)));
+  }
+  if (props.strikethrough) {
+    const _d = props, { strikethrough } = _d, rest = __objRest(_d, ["strikethrough"]);
+    if (props.components.strikethrough) {
+      const Component = props.components.strikethrough;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, __spreadValues({}, rest)));
+    }
+    return /* @__PURE__ */ React.createElement("s", null, /* @__PURE__ */ React.createElement(Leaf, __spreadValues({}, rest)));
+  }
+  if (props.code) {
+    const _e = props, { code } = _e, rest = __objRest(_e, ["code"]);
+    if (props.components.code) {
+      const Component = props.components.code;
+      return /* @__PURE__ */ React.createElement(Component, null, /* @__PURE__ */ React.createElement(Leaf, __spreadValues({}, rest)));
+    }
+    return /* @__PURE__ */ React.createElement("code", null, /* @__PURE__ */ React.createElement(Leaf, __spreadValues({}, rest)));
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.text);
+};
+export { TinaMarkdown };

package/dist/rich-text.js

@@ -0,0 +1,202 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react")) : typeof define === "function" && define.amd ? define(["exports", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP));
+})(this, function(exports2, React) {
+  "use strict";
+  function _interopDefaultLegacy(e) {
+    return e && typeof e === "object" && "default" in e ? e : { "default": e };
+  }
+  var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
+  const TinaMarkdown = ({
+    content,
+    components = {}
+  }) => {
+    if (!content) {
+      return null;
+    }
+    const nodes = Array.isArray(content) ? content : content.children;
+    if (!nodes) {
+      console.log(`Expected to find structured content for TinaMarkdown`);
+      return null;
+    }
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, nodes.map((child) => {
+      const _a = child, { children } = _a, props = __objRest(_a, ["children"]);
+      switch (child.type) {
+        case "h1":
+        case "h2":
+        case "h3":
+        case "h4":
+        case "h5":
+        case "h6":
+        case "p":
+        case "blockquote":
+        case "ol":
+        case "ul":
+        case "li":
+          if (components[child.type]) {
+            const Component2 = components[child.type];
+            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadProps(__spreadValues({}, props), {
+              childrenRaw: children
+            }), /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+              components,
+              content: children
+            }));
+          }
+          return React__default["default"].createElement(child.type, {
+            children: /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+              components,
+              content: children
+            })
+          });
+        case "lic":
+          return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+            components,
+            content: child.children
+          }));
+        case "img":
+          if (components[child.type]) {
+            const Component2 = components[child.type];
+            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadValues({}, props));
+          }
+          return /* @__PURE__ */ React__default["default"].createElement("img", {
+            src: child.url,
+            alt: child.caption
+          });
+        case "a":
+          if (components[child.type]) {
+            const Component2 = components[child.type];
+            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadValues({}, props), /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+              components,
+              content: children
+            }));
+          }
+          return /* @__PURE__ */ React__default["default"].createElement("a", {
+            href: child.url
+          }, /* @__PURE__ */ React__default["default"].createElement(TinaMarkdown, {
+            components,
+            content: children
+          }));
+        case "code_block":
+          const value = child.children.map((item) => {
+            return item.children[0].text;
+          }).join("\n");
+          if (components[child.type]) {
+            const Component2 = components[child.type];
+            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadProps(__spreadValues({}, props), {
+              childrenRaw: children
+            }), value);
+          }
+          return /* @__PURE__ */ React__default["default"].createElement("pre", null, /* @__PURE__ */ React__default["default"].createElement("code", null, value));
+        case "hr":
+          if (components[child.type]) {
+            const Component2 = components[child.type];
+            return /* @__PURE__ */ React__default["default"].createElement(Component2, __spreadValues({}, props));
+          }
+          return /* @__PURE__ */ React__default["default"].createElement("hr", null);
+        case "text":
+          return /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({
+            components
+          }, child));
+        case "mdxJsxTextElement":
+        case "mdxJsxFlowElement":
+          const Component = components[child.name];
+          if (Component) {
+            const props2 = child.props ? child.props : {};
+            return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadValues({}, props2));
+          } else {
+            const ComponentMissing = components["component_missing"];
+            if (ComponentMissing) {
+              return /* @__PURE__ */ React__default["default"].createElement(ComponentMissing, {
+                name: child.name
+              });
+            } else {
+              throw new Error(`No component provided for ${child.name}`);
+            }
+          }
+        default:
+          if (typeof child.text === "string") {
+            return /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({
+              components
+            }, child));
+          }
+          console.log(`No tina renderer for ${child.type}`, child);
+      }
+    }));
+  };
+  const Leaf = (props) => {
+    if (props.bold) {
+      const _a = props, { bold } = _a, rest = __objRest(_a, ["bold"]);
+      if (props.components.bold) {
+        const Component = props.components.bold;
+        return /* @__PURE__ */ React__default["default"].createElement(Component, null, /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({}, rest)));
+      }
+      return /* @__PURE__ */ React__default["default"].createElement("strong", null, /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({}, rest)));
+    }
+    if (props.italic) {
+      const _b = props, { italic } = _b, rest = __objRest(_b, ["italic"]);
+      if (props.components.italic) {
+        const Component = props.components.italic;
+        return /* @__PURE__ */ React__default["default"].createElement(Component, null, /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({}, rest)));
+      }
+      return /* @__PURE__ */ React__default["default"].createElement("em", null, /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({}, rest)));
+    }
+    if (props.underline) {
+      const _c = props, { underline } = _c, rest = __objRest(_c, ["underline"]);
+      if (props.components.underline) {
+        const Component = props.components.underline;
+        return /* @__PURE__ */ React__default["default"].createElement(Component, null, /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({}, rest)));
+      }
+      return /* @__PURE__ */ React__default["default"].createElement("u", null, /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({}, rest)));
+    }
+    if (props.strikethrough) {
+      const _d = props, { strikethrough } = _d, rest = __objRest(_d, ["strikethrough"]);
+      if (props.components.strikethrough) {
+        const Component = props.components.strikethrough;
+        return /* @__PURE__ */ React__default["default"].createElement(Component, null, /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({}, rest)));
+      }
+      return /* @__PURE__ */ React__default["default"].createElement("s", null, /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({}, rest)));
+    }
+    if (props.code) {
+      const _e = props, { code } = _e, rest = __objRest(_e, ["code"]);
+      if (props.components.code) {
+        const Component = props.components.code;
+        return /* @__PURE__ */ React__default["default"].createElement(Component, null, /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({}, rest)));
+      }
+      return /* @__PURE__ */ React__default["default"].createElement("code", null, /* @__PURE__ */ React__default["default"].createElement(Leaf, __spreadValues({}, rest)));
+    }
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, props.text);
+  };
+  exports2.TinaMarkdown = TinaMarkdown;
+  Object.defineProperty(exports2, "__esModule", { value: true });
+  exports2[Symbol.toStringTag] = "Module";
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.56.3",
+  "version": "0.57.0",
   "main": "dist/index.js",
   "files": [
     "dist"
@@ -8,7 +8,8 @@
   "buildConfig": {
     "entryPoints": [
       "src/index.ts",
-      "src/edit-state.tsx"
+      "src/edit-state.tsx",
+      "src/rich-text.tsx"
     ]
   },
   "typings": "dist/index.d.ts",
@@ -22,7 +23,9 @@
     "@graphql-codegen/core": "^1.15.4",
     "@graphql-codegen/typescript": "^1.15.4",
     "@graphql-codegen/typescript-operations": "^1.15.4",
-    "@tinacms/toolkit": "0.54.1",
+    "@headlessui/react": "^1.4.1",
+    "@heroicons/react": "^1.0.4",
+    "@tinacms/toolkit": "0.55.0",
     "@xstate/react": "^1.1.0",
     "codemirror": "^5.55.0",
     "cors": "^2.8.5",
@@ -39,6 +42,8 @@
     "next": "9.4.2",
     "node-fetch": "^2.6.0",
     "prop-types": "15.7.2",
+    "react-icons": "^4.3.1",
+    "react-router-dom": "^5.3.0",
     "ts-jest": "^26.5.3",
     "xstate": "^4.15.1",
     "yup": "^0.32.0"
@@ -50,14 +55,14 @@
     "@types/react": "^16.9.38",
     "@types/yup": "^0.29.10",
     "next": "9.4.2",
-    "react": "16.13.1",
+    "react": "16.14.0",
     "react-dom": "16.13.1",
     "styled-components": "^5.2.0",
     "tsup": "4.12.5",
     "typescript": "^4.3.5"
   },
   "peerDependencies": {
-    "react": ">=16.8",
+    "react": ">=16.14.0",
     "react-dom": ">=16.8",
     "react-is": "^16.13.1 || <18.0.0",
     "styled-components": "*"