Merge pull request #155 from netlify/minor-fixes

Improve README and fix overwritten toolbar.css

README.md

@@ -50,7 +50,7 @@ Add a `config.yml` file to the `/admin` folder and configure your content model:
 
 ```yaml
 backend:
-  name: github-api
+  name: github
   repo: owner/repo # Path to your Github repository
   branch: master # Branch to update (master by default)
 
@@ -65,7 +65,6 @@ collections: # A list of collections the CMS should be able to edit
       - {label: "Title", name: "title", widget: "string", tagname: "h1"}
       - {label: "Body", name: "body", widget: "markdown"}
       - {label: "Foo", name: "foo", widget: "foo"}
-    meta: # Meta data fields. Just like fields, but without any preview element
       - {label: "Publish Date", name: "date", widget: "datetime"}
   - name: "settings"
     label: "Settings"
@@ -130,10 +129,15 @@ content will look in the context of the published site.
 
 Currently these widgets are built-in:
 
-* **string** A basic text input
+* **string** A basic string input
-* **markdown** A markdown editor
+* **text** A text area input
+* **markdown** A markdown editor (both visual and raw mode)
 * **datetime** A date and time input
 * **image** An uploaded image
+* **number** An integer input
+* **object** A compound object, must have an inner `fields` attribute with more fields
+* **list** A list of items. Can have an inner `fields` attribute if each element is an object
+* **hidden** Hidden element - typically only useful with a `default` attribute
 
 
 ## Extending Netlify CMS
@@ -142,6 +146,7 @@ The Netlify CMS exposes an `window.CMS` global object that you can use to regist
 * **registerPreviewStyle** Register a custom stylesheet to use on the preview pane.
 * **regsiterPreviewTemplate** Registers a template for a collection.
 * **registerWidget** lets you register a custom widget.
+* **registerEditorComponent** lets you add a block component to the Markdown editor
 
 **Writing React Components inline**
 
@@ -234,10 +239,44 @@ CMS.registerWidget('categories', CategoriesControl);
 </script>
 ```
 
+### `registerEditorComponent`
 
-## Coming Soon:
+lets your register a block level component for the Markdown editor
 
-More built-in Widgets, CMS registry extendability endpoints, Docs on file formats, internal APIs etc...
+`CMS.registerEditorComponent(definition)`
 
-This is obviously still early days for Netlify CMS, there's a long list of features
+**Params**
-and improvements on the roadmap.
+
+* definition: The component definition, must specify: id, label, fields, patterns, fromBlock, toBlock, toPreview
+
+**Example:**
+
+```js
+CMS.registerEditorComponent({
+  // Internal id of the component
+  id: "youtube",
+  // Visible label
+  label: "Youtube",
+  // Fields the user need to fill out when adding an instance of the component
+  fields: [{name: 'id', label: 'Youtube Video ID', widget: 'string'}],
+  // Pattern to identify a block as being an instance of this component
+  pattern: /^{{<\s?youtube (\S+)\s?>}}/,
+  // Function to extract data elements from the regexp match
+  fromBlock: function(match) {
+    return {
+      id: match[1]
+    };
+  },
+  // Function to create a text block from an instance of this component
+  toBlock: function(obj) {
+    return '{{< youtube ' + obj.id + ' >}}';
+  },
+  // Preview output for this component. Can either be a string or a React component
+  // (Component gives better render performance)
+  toPreview: function(obj) {
+    return (
+      '<img src="http://img.youtube.com/vi/' + obj.id + '/maxresdefault.jpg" alt="Youtube Video"/>'
+    );
+  }
+});
+```

src/components/Widgets/MarkdownControlElements/Toolbar.css

@@ -1,107 +1,28 @@
-.editor {
+.Toolbar {
-  position: relative;
+  position: absolute;
+  z-index: 1000;
+  display: none;
+  margin: none;
+  padding: none;
+  box-shadow: 1px 1px 5px;
+  list-style: none;
+}
 
-  & h1,
+.Button {
-  & h2,
+  display: inline-block;
-  & h3 {
-    margin-bottom: 20px;
-    padding: 0;
-    border-bottom: none;
-    color: #7c8382;
-    text-decoration: none;
-    line-height: 1.45;
-  }
 
-  & h1 {
+  & button {
-    font-size: 2.5rem;
+    padding: 5px;
-  }
+    border: none;
-
+    border-right: 1px solid #eee;
-  & h2 {
-    font-size: 2rem;
-  }
-
-  & h3 {
-    font-size: 1.8rem;
-  }
-
-  & p {
-    margin-bottom: 20px;
-  }
-
-  & div[data-plugin] {
-    margin-bottom: 20px;
-    padding: 10px;
-    border: 1px solid #aaa;
     background: #fff;
   }
 }
 
-:global {
+.Button:last-child button {
-  & .ProseMirror {
+  border-right: none;
-    position: relative;
+}
-  }
+
-
+.Visible {
-  & .ProseMirror-content {
+  display: block;
-    white-space: pre-wrap;
-  }
-
-  & .ProseMirror-drop-target {
-    position: absolute;
-    width: 1px;
-    background: #666;
-    pointer-events: none;
-  }
-
-  & .ProseMirror-content ul,
-  & .ProseMirror-content ol {
-    padding-left: 30px;
-    cursor: default;
-  }
-
-  & .ProseMirror-content blockquote {
-    margin-right: 0;
-    margin-left: 0;
-    padding-left: 1em;
-    border-left: 3px solid #eee;
-  }
-
-  & .ProseMirror-content pre {
-    white-space: pre-wrap;
-  }
-
-  & .ProseMirror-content li {
-    position: relative;
-    pointer-events: none; /* Don't do weird stuff with marker clicks */
-  }
-
-  & .ProseMirror-content li > * {
-    pointer-events: auto;
-  }
-
-  & .ProseMirror-nodeselection *::selection {
-    background: transparent;
-  }
-
-  & .ProseMirror-nodeselection *::-moz-selection {
-    background: transparent;
-  }
-
-  & .ProseMirror-selectednode {
-    outline: 2px solid #8cf;
-  }
-  /* Make sure li selections wrap around markers */
-  & li.ProseMirror-selectednode {
-    outline: none;
-  }
-
-  & li.ProseMirror-selectednode:after {
-    position: absolute;
-    top: -2px;
-    right: -2px;
-    bottom: -2px;
-    left: -32px;
-    border: 2px solid #8cf;
-    content: '';
-    pointer-events: none;
-  }
 }