Remove forced title

README.md

@@ -27,19 +27,10 @@ See a working example in the [example directory](/example).
 A markdown string that represents the initial value of the editor. Use this to prop to restore
 previously saved content for the user to continue editing.
 
-#### `titlePlaceholder`
-
-Allows overriding of the placeholder text displayed where a title would be. The default is "Your title".
-
-#### `bodyPlaceholder`
+#### `placeholder`
 
 Allows overriding of the placeholder text displayed in the main body content. The default is "Write something nice…".
 
-#### `pretitle`
-
-An optional pretitle that will be prepended to the title. This allows the main title text to 
-remain aligned with the body content.
-
 #### `readOnly`
 
 With `readOnly` set to `false` the editor is optimized for composition. When `true` the editor can be used to display previously written content – headings gain anchors, a table of contents displays and links become clickable.

example/src/index.js

@@ -23,9 +23,11 @@ class Example extends React.Component<*, { readOnly: boolean }> {
   render() {
     return (
       <div style={{ marginTop: "60px" }}>
-        <button type="button" onClick={this.handleToggle}>
-          {this.state.readOnly ? "Editable" : "Read Only"}
-        </button>
+        <p>
+          <button type="button" onClick={this.handleToggle}>
+            {this.state.readOnly ? "Editable" : "Read Only"}
+          </button>
+        </p>
         <Editor
           readOnly={this.state.readOnly}
           defaultValue={defaultValue}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rich-markdown-editor",
   "description": "A rich text editor with Markdown shortcuts built on Slate",
-  "version": "1.4.2",
+  "version": "1.4.3-0",
   "main": "lib/index.js",
   "license": "BSD-3-Clause",
   "scripts": {

src/components/Paragraph.js

@@ -27,7 +27,7 @@ export default function Link({
       {children}
       {showPlaceholder && (
         <Placeholder contentEditable={false}>
-          {editor.props.bodyPlaceholder}
+          {editor.props.placeholder}
         </Placeholder>
       )}
     </p>

src/index.js

@@ -9,7 +9,6 @@ import defaultSchema from "./schema";
 import getDataTransferFiles from "./lib/getDataTransferFiles";
 import isModKey from "./lib/isModKey";
 import Flex from "./components/Flex";
-import ClickablePadding from "./components/ClickablePadding";
 import Toolbar from "./components/Toolbar";
 import BlockInsert from "./components/BlockInsert";
 import Placeholder from "./components/Placeholder";
@@ -20,11 +19,12 @@ import { insertImageFile } from "./changes";
 import renderMark from "./marks";
 import renderNode from "./nodes";
 
+export const theme = defaultTheme;
+export const schema = defaultSchema;
+
 type Props = {
   defaultValue: string,
-  titlePlaceholder: string,
-  bodyPlaceholder: string,
-  pretitle?: string,
+  placeholder: string,
   plugins?: Plugin[],
   readOnly?: boolean,
   toc?: boolean,
@@ -53,8 +53,7 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
   static defaultProps = {
     theme: defaultTheme,
     defaultValue: "",
-    titlePlaceholder: "Your title",
-    bodyPlaceholder: "Write something nice…",
+    placeholder: "Write something nice…",
     onImageUploadStart: () => {},
     onImageUploadStop: () => {},
   };
@@ -215,10 +214,8 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
     const {
       readOnly,
       toc,
-      pretitle,
       theme,
-      titlePlaceholder,
-      bodyPlaceholder,
+      placeholder,
       onSave,
       uploadImage,
       onSearchLink,
@@ -238,11 +235,11 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
         onDragEnter={this.cancelEvent}
         align="flex-start"
         justify="center"
+        column
         auto
       >
         <ThemeProvider theme={theme}>
           <React.Fragment>
-            <Header onClick={this.focusAtStart} readOnly={readOnly} />
             {readOnly &&
               toc &&
               this.state.editorLoaded &&
@@ -260,10 +257,8 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
               )}
             <StyledEditor
               innerRef={this.setEditorRef}
-              titlePlaceholder={titlePlaceholder}
-              bodyPlaceholder={bodyPlaceholder}
+              placeholder={placeholder}
               plugins={this.plugins}
-              pretitle={pretitle}
               value={this.state.editorValue}
               renderNode={this.renderNode}
               renderMark={renderMark}
@@ -279,28 +274,13 @@ class RichMarkdownEditor extends React.PureComponent<Props, State> {
               spellCheck={!readOnly}
               uploadImage={uploadImage}
             />
-            <ClickablePadding
-              onClick={!readOnly ? this.focusAtEnd : undefined}
-              grow
-            />
           </React.Fragment>
         </ThemeProvider>
       </Flex>
     );
   };
 }
 
-const Header = styled(Flex)`
-  height: 60px;
-  flex-shrink: 0;
-  align-items: flex-end;
-  ${props => !props.readOnly && "cursor: text;"};
-
-  @media print {
-    display: none;
-  }
-`;
-
 const StyledEditor = styled(Editor)`
   font-family: ${props => props.theme.fontFamily};
   font-weight: ${props => props.theme.fontWeight};

src/schema.js

@@ -1,6 +1,4 @@
 // @flow
-import { Block, Change, Node, Mark } from "slate";
-
 const schema = {
   blocks: {
     heading1: { nodes: [{ objects: ["text"] }], marks: [""] },
@@ -22,7 +20,6 @@ const schema = {
   },
   document: {
     nodes: [
-      { types: ["heading1"], min: 1, max: 1 },
       {
         types: [
           "paragraph",
@@ -45,30 +42,6 @@ const schema = {
         min: 1,
       },
     ],
-    normalize: (
-      change: Change,
-      reason: string,
-      {
-        node,
-        child,
-        mark,
-        index,
-      }: { node: Node, mark?: Mark, child: Node, index: number }
-    ) => {
-      switch (reason) {
-        case "child_type_invalid": {
-          return change.setNodeByKey(
-            child.key,
-            index === 0 ? "heading1" : "paragraph"
-          );
-        }
-        case "child_required": {
-          const block = Block.create(index === 0 ? "heading1" : "paragraph");
-          return change.insertNodeByKey(node.key, index, block);
-        }
-        default:
-      }
-    },
   },
 };