Merge pull request #17 from akeamc/move

Move

example/public/index.html

@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Web site created using create-react-app" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

example/src/App.tsx

@@ -23,8 +23,37 @@ const DUMMY_TREE: NodeTreeItem = {
         },
       },
       {
-        type: 'component/container',
-        content: {},
+        type: 'component/heading',
+        content: { children: 'This' },
+      },
+      {
+        type: 'component/heading',
+        content: { children: 'heading is' },
+      },
+      {
+        type: 'component/heading',
+        content: { children: 'directly editable' },
+      },
+      {
+        type: 'component/paragraph',
+        content: {
+          children:
+            'Cillum esse incididunt exercitation fugiat pariatur exercitation qui. Nulla proident velit et culpa ullamco esse occaecat eu dolor labore. Proident voluptate esse minim laborum ea nulla ex culpa mollit ea magna tempor tempor. Ad laborum pariatur tempor ipsum commodo sunt commodo aliquip laborum esse quis minim sint. Minim ea est aliquip et magna reprehenderit in sit aute. Culpa fugiat et commodo aliqua tempor ipsum do.',
+        },
+      },
+      {
+        type: 'component/paragraph',
+        content: {
+          children:
+            'Nulla magna laboris aliquip minim ut duis enim incididunt. Adipisicing amet irure ad non consequat. Voluptate id nulla et nulla sint et mollit in adipisicing duis. Adipisicing excepteur culpa minim occaecat laboris labore aliquip incididunt irure aliqua laboris cupidatat sit sit. Qui Lorem mollit irure proident occaecat proident. Consequat exercitation adipisicing sint consequat ad fugiat aliqua aute officia. Proident laborum deserunt magna aliqua laborum veniam anim ipsum.',
+        },
+      },
+      {
+        type: 'component/paragraph',
+        content: {
+          children:
+            'Excepteur nostrud velit qui elit nulla incididunt duis nostrud velit id ad laborum. Magna minim est excepteur excepteur deserunt eu amet. Minim sunt ex nostrud est pariatur. Incididunt occaecat officia minim consequat incididunt qui irure ad cupidatat esse duis esse. Adipisicing cupidatat irure nulla exercitation veniam nisi anim occaecat. Laborum nostrud eiusmod aliqua reprehenderit occaecat Lorem sunt minim anim incididunt ad duis est voluptate.',
+        },
       },
     ],
   },

example/src/components/Button/Button.module.css

@@ -3,6 +3,8 @@
   color: white;
   border: none;
   border-radius: 4px;
+
+  cursor: pointer;
 }
 
 .color-black {

example/src/components/Button/index.tsx

@@ -3,13 +3,15 @@ import cx from 'classnames';
 
 import styles from './Button.module.css';
 
-export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   color?: 'gray' | 'black';
 }
 
-const Button: React.FC<ButtonProps> = ({ children, color = 'gray' } = {}) => {
+const Button: React.FC<ButtonProps> = ({ children, color = 'gray', ...props } = {}) => {
   return (
-    <button className={cx(styles.root, { [styles[`color-${color}`]]: color })}>{children}</button>
+    <button {...props} className={cx(styles.root, { [styles[`color-${color}`]]: color })}>
+      {children}
+    </button>
   );
 };
 

example/src/components/Heading/index.tsx

@@ -20,9 +20,11 @@ const Heading: React.FC<{ children: string; onChange?: (t: string) => void }> =
   }, [handleKeyDown]);
 
   return (
-    <h1 className={styles.root} contentEditable ref={ref} suppressContentEditableWarning>
-      {children}
-    </h1>
+    <div>
+      <h1 className={styles.root} contentEditable ref={ref} suppressContentEditableWarning>
+        {children}
+      </h1>
+    </div>
   );
 };
 

example/src/components/Paragraph/Paragraph.module.css

@@ -0,0 +1,4 @@
+.root {
+  margin: 0 auto;
+  max-width: 80ch;
+}

example/src/components/Paragraph/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import styles from './Paragraph.module.css';
+
+const Paragraph: React.FC = ({ children }) => <p className={styles.root}>{children}</p>;
+
+export default Paragraph;

example/src/config.tsx

@@ -5,6 +5,7 @@ import Grid from './components/Grid';
 import Heading from './components/Heading';
 import Hero from './components/Hero';
 import Page from './components/Page';
+import Paragraph from './components/Paragraph';
 import Unsplash, { TYPE_IDENTIFIER as UNSPLASHED_TYPE, UnsplashedImage } from './edits/Unsplashed';
 
 const components: ComponentConfig[] = [
@@ -60,6 +61,15 @@ const components: ComponentConfig[] = [
       children: CMSType.children({ self: false, allowed: ['component/caption-image'] }),
     }),
   },
+  {
+    title: 'Paragraph',
+    Component: Paragraph,
+    type: 'component/paragraph',
+    editOnClick: true,
+    content: {
+      text: CMSType.string(),
+    },
+  },
 ];
 
 const config = createConfig({