diff --git a/package-lock.json b/package-lock.json index 9d15abf..4aa5e0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10549,9 +10549,9 @@ } }, "idyll": { - "version": "5.4.2", - "resolved": "https://registry.npmjs.org/idyll/-/idyll-5.4.2.tgz", - "integrity": "sha512-L9kLVTx6MMrVYV2TZZ7vF12FWWbBSd0FMDJQ8TFwJJR51rV/A1luOilDSBaaxrj5iVBvXPZ3/MvZuMd+8CvxRg==", + "version": "5.4.5", + "resolved": "https://registry.npmjs.org/idyll/-/idyll-5.4.5.tgz", + "integrity": "sha512-QfCOIGTKk0Q3kn1vktU2L3NGq1DMaG90oUVj5bDwVTsRnvJu6ES/Styd2om1qbXZiPp+Qkjx+F9vUFL9IIkGlA==", "requires": { "babel-preset-env": "^1.6.0", "babel-preset-react": "^6.22.0", @@ -10575,11 +10575,11 @@ "html-tags": "^1.1.1", "idyll-ast": "^2.2.3", "idyll-compiler": "^4.0.23", - "idyll-components": "^4.1.12", - "idyll-document": "^3.4.14", + "idyll-components": "^4.1.15", + "idyll-document": "^3.4.15", "idyll-layouts": "^3.0.7", "idyll-template-projects": "^2.2.7", - "idyll-themes": "^3.1.5", + "idyll-themes": "^3.1.6", "inquirer": "^5.2.0", "insert-css": "^2.0.0", "mkdirp": "^0.5.1", @@ -10671,9 +10671,9 @@ "integrity": "sha512-D1DgjXtdf+kIrjmO5jPGitoDVRh698Sxl1R3R2cwEFXAkRTRKsOU0UD8UAZcVeYy8MAB28WXvwv1i7tvueuWZA==" }, "idyll-components": { - "version": "4.1.12", - "resolved": "https://registry.npmjs.org/idyll-components/-/idyll-components-4.1.12.tgz", - "integrity": "sha512-NabPjaKeYMgcUnA9rGQ+8cSxvRkYsA+hz4fNNUy08NKJa5cfqonFdADsgyRyfA+8Y/2Utsv77NhZg896YqtShQ==", + "version": "4.1.15", + "resolved": "https://registry.npmjs.org/idyll-components/-/idyll-components-4.1.15.tgz", + "integrity": "sha512-yIw+KAMgSbvNht0URv3LFwBkpb71j9xmQTpRpC/6V8U2N1AfFqd8tknVqILq3iOpuOCEGrxv7T1yQn8nvIMf6w==", "requires": { "d3-array": "^1.2.0", "d3-drag": "^1.1.1", @@ -10688,14 +10688,14 @@ "react-syntax-highlighter": "^5.7.0", "react-table": "6.8.6", "react-youtube": "^7.6.0", - "scrollama": "^1.4.1", + "scrollama": "^2.0.0", "victory": "^0.23.0" } }, "idyll-document": { - "version": "3.4.14", - "resolved": "https://registry.npmjs.org/idyll-document/-/idyll-document-3.4.14.tgz", - "integrity": "sha512-f/cTuTpI/xmHC4FsvuyqUG4ILD5snQQA9tMLk/UvS6VrViEkrsDS3MSxOzJU5ogoxGROtHUp+BxjX6o6JUGbhg==", + "version": "3.4.15", + "resolved": "https://registry.npmjs.org/idyll-document/-/idyll-document-3.4.15.tgz", + "integrity": "sha512-QbpZQJ3H9jxzsw3BnvJ0xbK2B4BLnwo62LhHhaObLc/BCwg5y3G/LmCAOGwi2D1odg4WT3tzXyBXPpE5Ttc/Zg==", "requires": { "change-case": "^3.0.1", "cross-env": "^5.2.0", @@ -10705,7 +10705,7 @@ "html-tags": "^2.0.0", "idyll-compiler": "^4.0.23", "idyll-layouts": "^3.0.7", - "idyll-themes": "^3.1.5", + "idyll-themes": "^3.1.6", "object.entries": "^1.0.4", "object.values": "^1.0.4", "react-dom-factories": "^1.0.1", @@ -10738,9 +10738,9 @@ "integrity": "sha512-qU8NO8cSn7F3xrG6jlgHUalWZvhQebpjSwfMvZiLQwhyGu8Wxsn4JAR4d+1I6ca432gYtPWtBXWHwC7VxbYdGw==" }, "idyll-themes": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/idyll-themes/-/idyll-themes-3.1.5.tgz", - "integrity": "sha512-JaIdAgoch4/0ah9+GrxZSRuRNz/Mux3cM+/I0sHlpCpY9n48Z96d77cCwMbqblKWnhO+a2ScH99hl1hSwJV8gw==" + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/idyll-themes/-/idyll-themes-3.1.6.tgz", + "integrity": "sha512-B1N+aLvYx7+t9PDlugoF7yrQf8NVNFfcK/HpXo2aUJr1mwNRl0MsqPQv+0N2Oj/QAzdiSaYEKAVYyZjRv6yB7w==" }, "ieee754": { "version": "1.2.1", @@ -17689,13 +17689,6 @@ "fast-deep-equal": "3.1.3", "prop-types": "15.7.2", "youtube-player": "5.5.2" - }, - "dependencies": { - "fast-deep-equal": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" - } } }, "read-only-stream": { @@ -18458,9 +18451,9 @@ } }, "scrollama": { - "version": "1.4.4", - "resolved": "https://registry.npmjs.org/scrollama/-/scrollama-1.4.4.tgz", - "integrity": "sha512-okBTs3Wa0NJY6xoX6wXUWltorKe5N7tF2fF8y0oJIt6VFeGja461WXAODhxpKq+1Zy4gqKIG2nghDYukYqBD+Q==" + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/scrollama/-/scrollama-2.2.1.tgz", + "integrity": "sha512-Wq880ZLa3G6YSDbV7Bg5thEggo20+UM9qFu9P9ZAZlPmTt/rhIroUNmsZYvO8C5Y0kLp4nwK8S2Zha+bbOFiYg==" }, "scrollmonitor": { "version": "1.2.4", diff --git a/package.json b/package.json index c9997ee..32f348b 100644 --- a/package.json +++ b/package.json @@ -53,11 +53,11 @@ "fast-copy": "^2.1.1", "fast-deep-equal": "^3.1.3", "fix-path": "^3.0.0", - "idyll": "^5.4.2", + "idyll": "^5.4.5", "idyll-ast": "^2.2.3", "idyll-compiler": "^4.0.23", - "idyll-components": "^4.1.12", - "idyll-document": "^3.4.14", + "idyll-components": "^4.1.15", + "idyll-document": "^3.4.15", "lodash.throttle": "^4.1.1", "npm": "^7.6.1", "open": "^7.4.2", diff --git a/src/constants.js b/src/constants.js index cfe98df..5cb98e7 100644 --- a/src/constants.js +++ b/src/constants.js @@ -77,7 +77,6 @@ export const EXCLUDED_COMPONENTS = [ 'generateHeaders', 'fixed', 'inline', - 'scroller', 'step', 'stepper-control', 'case', @@ -86,7 +85,6 @@ export const EXCLUDED_COMPONENTS = [ 'analytics', 'meta', 'preload', - 'stepper', 'h1', 'h2', 'h3', diff --git a/src/render/idyll-display/components/drop-target.js b/src/render/idyll-display/components/drop-target.js index 5062d1e..436bbb9 100644 --- a/src/render/idyll-display/components/drop-target.js +++ b/src/render/idyll-display/components/drop-target.js @@ -2,8 +2,10 @@ import React from 'react'; import { DropTarget } from 'react-dnd'; import { RENDER_WINDOW_NAME } from '../../../constants'; import Context from '../../context/context'; -import { getRandomId } from '../utils'; +import { getRandomId, relativeDataPaths } from '../utils'; const compile = require('idyll-compiler'); +const AST = require('idyll-ast'); + const BASE_CLASS_NAME = 'idyll-studio-drop-target'; @@ -83,6 +85,7 @@ const withDropListener = (callback) => { tagInfo.children !== undefined ? tagInfo.children[0] : ''; tag += ']' + children + '[/' + tagInfo.name + ']'; } + this.handleASTChange(tag, visibleDropTargets); } @@ -90,7 +93,7 @@ const withDropListener = (callback) => { // and sends modified ast back up to top level handleASTChange(componentMarkup, visibleDropTargets) { const { insertBefore, insertAfter } = this.props; - const { ast } = this.context; + let { ast } = this.context; let targetNode; let position; @@ -104,12 +107,21 @@ const withDropListener = (callback) => { compile(componentMarkup).then((componentAST) => { let componentNode = componentAST.children[0]; + let loopCount = 0; while ( componentNode.name && (componentNode.name.toLowerCase() === 'textcontainer' || componentNode.name.toLowerCase() === 'text-container') ) { componentNode = componentNode.children[0]; + loopCount += 1; + } + + // If the component is not wrapped in a text-container, + // then it is fullWidth + if (loopCount === 0) { + componentNode.properties = componentNode.properties || {}; + componentNode.properties.fullWidth = { type: "value", value: true }; } const randomizeIds = (node) => { @@ -165,6 +177,8 @@ const withDropListener = (callback) => { } } + + let numBefore = 0; visibleDropTargets.forEach((target, i) => { @@ -178,6 +192,11 @@ const withDropListener = (callback) => { RENDER_WINDOW_NAME )[0].scrollTop; + if (componentNode.properties && componentNode.properties.fullWidth) { + const markup = AST.toMarkup(relativeDataPaths(ast), { insertFullWidth: true }); + ast = compile(markup, { async: false }); + } + this.context.setAst(ast); // must pass info up level if (callback) { callback(scrollPosition, height); diff --git a/src/render/idyll-display/render.js b/src/render/idyll-display/render.js index 5d96e49..7afb016 100644 --- a/src/render/idyll-display/render.js +++ b/src/render/idyll-display/render.js @@ -132,7 +132,9 @@ const Renderer = withContext( const _NODE_PATH = process.env.NODE_PATH; process.env.NODE_PATH += ':' + __dirname; delete require.cache[require.resolve(component.path)]; - this.loadedComponents[component.name] = require(require.resolve( + + const _name = component.name.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(''); + this.loadedComponents[_name] = require(require.resolve( component.path, { paths: [component.path, __dirname], @@ -168,9 +170,10 @@ const Renderer = withContext( const _NODE_PATH = process.env.NODE_PATH; process.env.NODE_PATH += ':' + __dirname; components.forEach(({ name, path }) => { - if (!this.loadedComponents[name]) { + const _name = name.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(''); + if (!this.loadedComponents[_name]) { try { - this.loadedComponents[name] = require(require.resolve(path, { + this.loadedComponents[_name] = require(require.resolve(path, { paths: [path, __dirname], })); } catch (e) { @@ -178,6 +181,7 @@ const Renderer = withContext( } } }); + process.env.NODE_PATH = _NODE_PATH; return ( diff --git a/src/render/idyll-display/utils/index.js b/src/render/idyll-display/utils/index.js index c691360..a05c674 100644 --- a/src/render/idyll-display/utils/index.js +++ b/src/render/idyll-display/utils/index.js @@ -4,6 +4,7 @@ import fs from 'fs'; import path from 'path'; import parse from 'csv-parse/lib/sync'; import copy from 'fast-copy'; +const AST = require('idyll-ast'); const getRandomId = () => { return Math.floor(Math.random() * 10000000000) + 100000000; @@ -323,6 +324,17 @@ const readFile = (source) => { const getComponentDomId = (name, id) => `${name}-${id}`; + + +const relativeDataPaths = (ast) => { + const dataNodes = AST.getNodesByType(ast, 'data'); + dataNodes.forEach((node) => { + node.properties.source.value = path.basename(node.properties.source.value); + }); + return ast; +}; + + module.exports = { getNodeById, getParentNodeById, @@ -343,4 +355,5 @@ module.exports = { boolify, reassignNodeIds, getComponentDomId, + relativeDataPaths }; diff --git a/src/render/index.js b/src/render/index.js index 8255003..6acd2d7 100644 --- a/src/render/index.js +++ b/src/render/index.js @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'; import IdyllDisplay from './idyll-display'; import Context from './context/context'; import copy from 'fast-copy'; -import { readFile, jsonParser } from './idyll-display/utils'; +import { readFile, jsonParser, relativeDataPaths } from './idyll-display/utils'; import { DndProvider } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; import { basename } from 'path'; @@ -19,14 +19,6 @@ const PUBLISHED = 'Published! It may take up to a minute for the latest changes to be reflected.'; - const relativeDataPaths = (ast) => { - const dataNodes = idyllAST.getNodesByType(ast, 'data'); - dataNodes.forEach((node) => { - node.properties.source.value = basename(node.properties.source.value); - }); - return ast; - }; - class App extends React.PureComponent { constructor(props) { super(props);