codelabs-react - npm Package Compare versions

Comparing version 1.7.3 to 1.8.0

dist/components.js

@@ -25,2 +25,3 @@ "use strict";
 exports.WarningBox = WarningBox;
+exports.Img = Img;
 
@@ -185,2 +186,10 @@ var _react = _interopRequireDefault(require("react"));
   }, children);
+}
+
+function Img(_ref20) {
+  var src = _ref20.src;
+  return /*#__PURE__*/_react["default"].createElement("img", {
+    width: "100%",
+    src: src
+  });
 }

dist/core.test.js

@@ -11,2 +11,4 @@ "use strict";
 
+var _document1607876232180Inline = require("../stories/document-1607876232180-inline.json");
+
 var _extract = _interopRequireDefault(require("./extract"));
@@ -24,3 +26,3 @@
 test("Extract parses the document", function () {
-  var tree = _extract["default"].parse(_document.content);
+  var tree = _extract["default"].parse(_document.content, _document1607876232180Inline.inlineObjects);
 
@@ -27,0 +29,0 @@ expect(tree).toMatchSnapshot();

dist/extract.js

@@ -25,3 +25,3 @@ "use strict";
 
-function parse(content) {
+function parse(content, images) {
   var title = extractTitle(content);
@@ -33,3 +33,3 @@ var headings = extractHeadings(content);
       if (node.paragraph) {
-        return parseParagraph(node.paragraph);
+        return parseParagraph(node.paragraph, images);
       } else if (node.table) {
@@ -49,3 +49,3 @@ return parseTable(node.table);
 
-function parseParagraph(paragraph) {
+function parseParagraph(paragraph, images) {
   return {
@@ -58,3 +58,11 @@ type: getParagraphType(paragraph),
       if (element.inlineObjectElement) {
-        return null;
+        var _inlineObject$inlineO, _inlineObject$inlineO2, _inlineObject$inlineO3;
+
+        var inlineObjectId = element.inlineObjectElement.inlineObjectId;
+        var inlineObject = images[inlineObjectId];
+        if (!inlineObject) return null;
+        return {
+          type: "img",
+          src: (_inlineObject$inlineO = inlineObject.inlineObjectProperties) === null || _inlineObject$inlineO === void 0 ? void 0 : (_inlineObject$inlineO2 = _inlineObject$inlineO.embeddedObject) === null || _inlineObject$inlineO2 === void 0 ? void 0 : (_inlineObject$inlineO3 = _inlineObject$inlineO2.imageProperties) === null || _inlineObject$inlineO3 === void 0 ? void 0 : _inlineObject$inlineO3.contentUri
+        };
       } // TODO(): add horizontal rule support
@@ -61,0 +69,0 @@

dist/index.js

@@ -39,2 +39,4 @@ "use strict";
   var content = _ref.content,
+      _ref$images = _ref.images,
+      images = _ref$images === void 0 ? {} : _ref$images,
       _ref$overrides = _ref.overrides,
@@ -73,4 +75,5 @@ overrides = _ref$overrides === void 0 ? {} : _ref$overrides,
   var CodeBoxComponent = overrides.CodeBox || _components.CodeBox;
+  var ImgComponent = overrides.Img || _components.Img;
 
-  var parsedContent = _extract["default"].parse(content);
+  var parsedContent = _extract["default"].parse(content, images);
 
@@ -116,2 +119,5 @@ var Mapper = {
       return /*#__PURE__*/_react["default"].createElement(CodeBoxComponent, props, props.children);
+    },
+    img: function img(props) {
+      return /*#__PURE__*/_react["default"].createElement(ImgComponent, props);
     }
@@ -185,2 +191,9 @@ };
 
+    if (element.type === "img") {
+      console.log(element);
+      return /*#__PURE__*/_react["default"].createElement(Mapper.img, _extends({
+        key: key
+      }, element));
+    }
+
     return /*#__PURE__*/_react["default"].createElement("span", {
@@ -187,0 +200,0 @@ style: {

package.json

 {
   "name": "codelabs-react",
-  "version": "1.7.3",
+  "version": "1.8.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -24,2 +24,6 @@ # codelabs-react
   content={content}
+  // optional, response from the google docs api
+  // GET https://docs.googleapis.com/v1/documents/{documentId}?fields=inlineObjects
+  // needed, if you want images to be rendered
+  images={images}
   // optional, if your app needs to know about a page change
@@ -26,0 +30,0 @@ onPageChange={({ nextPage }) => {}}

src/components.js

@@ -178,1 +178,5 @@ import React from "react";
 }
+
+export function Img({ src }) {
+  return <img width="100%" src={src} />;
+}

src/core.test.js

@@ -12,2 +12,3 @@ import React from "react";
 import { content } from "../stories/document-1607876232180.json";
+import { inlineObjects } from "../stories/document-1607876232180-inline.json";
 import Extract from "./extract";
@@ -20,3 +21,3 @@
 test("Extract parses the document", () => {
-  const tree = Extract.parse(content);
+  const tree = Extract.parse(content, inlineObjects);
   expect(tree).toMatchSnapshot();
@@ -23,0 +24,0 @@ });

src/extract.js

 const infoColor = { red: 0.8509804, green: 0.91764706, blue: 0.827451 };
 const warningColor = { red: 0.9882353, green: 0.8980392, blue: 0.8039216 };
 
-function parse(content) {
+function parse(content, images) {
   const title = extractTitle(content);
@@ -13,3 +13,3 @@ const headings = extractHeadings(content);
       if (node.paragraph) {
-        return parseParagraph(node.paragraph);
+        return parseParagraph(node.paragraph, images);
       } else if (node.table) {
@@ -30,3 +30,3 @@ return parseTable(node.table);
 
-function parseParagraph(paragraph) {
+function parseParagraph(paragraph, images) {
   return {
@@ -37,3 +37,12 @@ type: getParagraphType(paragraph),
       if (element.inlineObjectElement) {
-        return null;
+        const { inlineObjectId } = element.inlineObjectElement;
+        const inlineObject = images[inlineObjectId];
+        if (!inlineObject) return null;
+
+        return {
+          type: "img",
+          src:
+            inlineObject.inlineObjectProperties?.embeddedObject?.imageProperties
+              ?.contentUri,
+        };
       }
@@ -40,0 +49,0 @@

src/index.js

@@ -23,2 +23,3 @@ import React, { useState } from "react";
   ListItem,
+  Img,
 } from "./components";
@@ -31,2 +32,3 @@
   content,
+  images = {},
   overrides = {},
@@ -63,4 +65,6 @@ onPageChange = () => {},
 
-  const parsedContent = Extract.parse(content);
+  const ImgComponent = overrides.Img || Img;
 
+  const parsedContent = Extract.parse(content, images);
+
   const Mapper = {
@@ -88,2 +92,3 @@ p: (props) => <ParapgraphComponent>{props.children}</ParapgraphComponent>,
     ),
+    img: (props) => <ImgComponent {...props} />,
   };
@@ -164,2 +169,7 @@
 
+        if (element.type === "img") {
+          console.log(element);
+          return <Mapper.img key={key} {...element} />;
+        }
+
         return (
@@ -166,0 +176,0 @@ <span

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

315288

increased by2.66%

Lines of code

1385

increased by3.67%

Number of lines in readme file

77

increased by5.48%

No dependency changes