Special characters and Placeholders (#223)

* Add decoder utility and tests for it

* Use decodeText in the component

* Move placeholders and seeds to separate constants. Use them in the editor

* Add placeholder color

* Update default text.

Co-authored-by: Mackenzie <remember.mackenzie@gmail.com>

Author: MaxStalker

src/components/Arguments/SingleArgument/styles.tsx

@@ -44,6 +44,10 @@ export const Input = styled.input`
     margin-bottom: 0;
   }
   box-sizing: border-box;
+
+  ::placeholder {
+    color: #999;
+  }
 `;
 
 export const Error = styled.p`

src/components/MdeEditor.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import SimpleMDE from "react-simplemde-editor";
+import { PLACEHOLDER_README } from "providers/Project/projectDefault";
 import "easymde/dist/easymde.min.css";
 import "unreset-css/dist/unreset.min.css"; // restore browser default element styles
 
@@ -14,6 +15,9 @@ export const MdeEditor: React.FC<{
       className="unreset"
       value={value}
       onChange={v => onChange(v)}
+      options={{
+        placeholder: PLACEHOLDER_README
+      }}
     />
   )
 }

src/containers/Editor/components.tsx

@@ -10,8 +10,10 @@ import { Editor as EditorRoot } from 'layout/Editor';
 import { Heading } from 'layout/Heading';
 import { EntityType, ActiveEditor } from 'providers/Project';
 import { useProject } from 'providers/Project/projectHooks';
+import { PLACEHOLDER_DESCRIPTION, PLACEHOLDER_TITLE } from "providers/Project/projectDefault";
 import {Account, Project} from 'api/apollo/generated/graphql';
 
+
 import debounce from 'util/debounce';
 import Mixpanel from 'util/mixpanel';
 
@@ -29,6 +31,8 @@ import {
   Label,
 } from 'components/Arguments/SingleArgument/styles';
 import { Markdown } from 'components/Markdown';
+
+import { decodeText } from "util/readme";
 import { CadenceLanguageServer, Callbacks } from "util/language-server";
 import { MonacoServices } from "monaco-languageclient/lib/monaco-services";
 import * as monaco from "monaco-editor";
@@ -214,9 +218,11 @@ const EditorContainer: React.FC<EditorContainerProps> = ({
   project,
   active,
 }) => {
-  const [title, setTitle] = useState<string | undefined>(project.title);
+  const [title, setTitle] = useState<string | undefined>(
+      decodeText(project.title)
+  );
   const [description, setDescription] = useState<string | undefined>(
-    project.description,
+      decodeText(project.description)
   );
   const [readme, setReadme] = useState<string | undefined>(project.readme);
 
@@ -371,6 +377,7 @@ const EditorContainer: React.FC<EditorContainerProps> = ({
                 <Label>Title</Label>
                 <Input
                   value={title}
+                  placeholder={PLACEHOLDER_TITLE}
                   onChange={(event) => {
                     setTitle(event.target.value);
                     updateProject(event.target.value, description, readme);
@@ -381,6 +388,7 @@ const EditorContainer: React.FC<EditorContainerProps> = ({
                 <Label>Description</Label>
                 <Input
                   value={description}
+                  placeholder={PLACEHOLDER_DESCRIPTION}
                   onChange={(event) => {
                     setDescription(event.target.value);
                     updateProject(title, event.target.value, readme);

src/providers/Project/projectDefault.ts

@@ -135,60 +135,22 @@ const DEFAULT_SCRIPT = `pub fun main(): Int {
 }
 `;
 
+export const SEED_TITLE = "Cadence Playground"
+export const SEED_DESCRIPTION = "Showcase Cadence interactions"
+export const SEED_README = ""
+
+export const PLACEHOLDER_TITLE = "Name of your project"
+export const PLACEHOLDER_DESCRIPTION = "Single sentence describing this project"
+export const PLACEHOLDER_README = `Here you can provide a detailed explanation to help others understand how to use your Playground project.
+Editor supports Markdown. Please, consult https://www.markdownguide.org/cheat-sheet/ for examples and tips.`
+
 export function createDefaultProject(): Project {
   return createLocalProject(
     null,
     strToSeed(uuid()),
-    "Default project title ~ Hello World!",
-    "Default project description ~ This project demonstrates...",
-`# My Project README!
-
-[![](https://avatars.githubusercontent.com/u/1680273?s=80&v=4)](https://avatars.githubusercontent.com/u/1680273?v=4)
-
-**This** is an *example* ~~text~~.
-
-Unordered list example:
-
-* hi
-* hello
-* howdy
-
-> This is a famous quote
-
-[Now try a link](https://www.onflow.org/)
-
-
-And some code:
-
-\`\`\`
-// HelloWorld.cdc
-//
-// Welcome to Cadence! This is one of the simplest programs you can deploy on Flow.
-//
-// The HelloWorld contract contains a single string field and a public getter function.
-//
-// Follow the "Hello, World!" tutorial to learn more:
-// https://docs.onflow.org/cadence/tutorial/02-hello-world/
-
-access(all) contract HelloWorld {
-
-    // Declare a public field of type String.
-    //
-    // All fields must be initialized in the init() function.
-    access(all) let greeting: String
-
-    // The init() function is required if the contract contains any fields.
-    init() {
-        self.greeting = "Hello, World!"
-    }
-
-    // Public function that returns our friendly greeting!
-    access(all) fun hello(): String {
-        return self.greeting
-    }
-}
-\`\`\`
-`,
+    SEED_TITLE,
+    SEED_DESCRIPTION,
+    SEED_README,
     DEFAULT_ACCOUNTS,
     [{ title: "Transaction", code: DEFAULT_TRANSACTION }],
     [{ title: "Script" , code :DEFAULT_SCRIPT }]

src/util/readme.ts

@@ -0,0 +1,12 @@
+// Title and Description fields come from server in sanitized form, escaping all special characters
+// for security reasons. For user friendly display we need to convert it back to readable form
+//
+// Original solution was found on StackOverflow: https://stackoverflow.com/a/42254787/3892712
+export const decodeText = (text: string): string => {
+  const parser = new DOMParser();
+  const dom = parser.parseFromString(
+    `<!doctype html><body>${text}</body></html>`,
+    'text/html',
+  );
+  return dom.body.textContent;
+};

test/util/readme.test.js

@@ -0,0 +1,17 @@
+import { decodeText } from '../../src/util/readme';
+
+describe('Decoding', () => {
+  test('properly decodes input - multiple special characters', () => {
+    const input = `'&"/\\\\~`;
+    const expected = `'&"/\\\\~`;
+    const result = decodeText(input);
+    expect(result).toBe(expected);
+  });
+
+	test('properly decodes input - human readable text', () => {
+		const input = `We're just a @silver-boy & /bilbo-baggins\\`;
+		const expected = `We're just a @silver-boy & /bilbo-baggins\\`;
+		const result = decodeText(input);
+		expect(result).toBe(expected);
+	});
+});