diff --git a/README.md b/README.md index 6af6f360..b461c530 100644 --- a/README.md +++ b/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 -* **markdown** A markdown editor +* **string** A basic string input +* **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); ``` +### `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 -and improvements on the roadmap. +**Params** + +* 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 ( + 'Youtube Video' + ); + } +}); +``` diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar.css b/src/components/Widgets/MarkdownControlElements/Toolbar.css index 06f9b3bd..2d91b9f7 100644 --- a/src/components/Widgets/MarkdownControlElements/Toolbar.css +++ b/src/components/Widgets/MarkdownControlElements/Toolbar.css @@ -1,107 +1,28 @@ -.editor { - position: relative; +.Toolbar { + position: absolute; + z-index: 1000; + display: none; + margin: none; + padding: none; + box-shadow: 1px 1px 5px; + list-style: none; +} - & h1, - & h2, - & h3 { - margin-bottom: 20px; - padding: 0; - border-bottom: none; - color: #7c8382; - text-decoration: none; - line-height: 1.45; - } +.Button { + display: inline-block; - & h1 { - font-size: 2.5rem; - } - - & 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; + & button { + padding: 5px; + border: none; + border-right: 1px solid #eee; background: #fff; } } -:global { - & .ProseMirror { - position: relative; - } - - & .ProseMirror-content { - 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; - } +.Button:last-child button { + border-right: none; +} + +.Visible { + display: block; }