Merge branch '26-initialise-default-document-with-tutorial-text' into 'dev'

Resolve "Initialise default document with tutorial text"

See merge request !19

src/Components/CMDEd.tsx

@@ -10,7 +10,8 @@ import DiffMatchPatch from 'diff-match-patch';
 export interface CMDEditorProps {
     session: any,
     collection: any,
-    docName: string
+    docName: string,
+    placeholder: string
 }
 
 /**
@@ -41,7 +42,8 @@ export default class CMDEditor extends Component<CMDEditorProps, CMDEditorState>
     private nodeRef = createRef<HTMLDivElement>();
 
     public static defaultProps = {
-        docName: "Untitled-1"
+        docName: "Untitled-1",
+        placeholder: ""
     }
 
     /**
@@ -180,6 +182,10 @@ export default class CMDEditor extends Component<CMDEditorProps, CMDEditorState>
             },
             1000
         );
+        let textarea = this.nodeRef.current
+            ?.getElementsByClassName("w-md-editor-text-input")
+            ?.item(0) as HTMLInputElement;
+        textarea.placeholder = this.props.placeholder
     }
 
     /**

src/config.json

 {
     "dbName": "concordant",
     "serviceUrl": "http://127.0.0.1:4000",
-    "credentials": "credentials"
+    "credentials": "credentials",
+    "defaultText": "This is c-markdown-editor, the Concordant collaborative editor.  \n\nYou type into the left-hand panel, which displays the raw characters. The right-hand one displays formatted text.  \n\nThe usual Markdown conventions apply: # for titles, *for italics*, etc. Alternatively you can use the buttons at the top.  \n\nYou can download your document as a Markdown file, using the rightmost button.  \n\nIn the \"Document:\" box, name your document. Browsers using the same name share their edits through the Concordant platform. A document is persistent; however, we reset our storage server periodically to limit possible abuse.  \n\nPlease contact mailto:support@concordant.io with any issues.  \n\nKnown issues with this version include: poor interactive performance; no disconnected mode; limited awareness (remote cursors are not displayed)."
 }

src/index.tsx

@@ -31,7 +31,7 @@ ReactDOM.render(
                 The Markdown editor exercises the RGA and LWWMap CRDTs.
             </p>
         </div>
-        <CMDEd session={session} collection={collection} />
+        <CMDEd session={session} collection={collection} placeholder={CONFIG.defaultText} />
         <div className="padding">
             <p className="footer">© CONCORDANT 2021.</p>
         </div>