more stuff, started adding auto-markdown example

2025-08-28 01:19:52 +02:00 · 2016-06-20 19:16:36 -07:00
parent 8bf081d26f
commit eae70f0f17
12 changed files with 389 additions and 22 deletions
--- a/examples/plain-text/index.css
+++ b/examples/plain-text/index.css
@@ -0,0 +1,12 @@
+
+html {
+  background: #eee;
+  padding: 20px;
+}
+
+main {
+  background: #fff;
+  padding: 10px;
+  max-width: 40em;
+  margin: 0 auto;
+}
--- a/examples/plain-text/index.html
+++ b/examples/plain-text/index.html
@@ -0,0 +1,11 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Editor | Plain Text Example</title>
+    <link rel="stylesheet" href="index.css">
+  </head>
+  <body>
+    <main></main>
+    <script src="build.js"></script>
+  </body>
+</html>
--- a/examples/plain-text/index.js
+++ b/examples/plain-text/index.js
@@ -0,0 +1,47 @@
+
+import Editor from '../..'
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Plaintext } from '../..'
+
+/**
+ * State.
+ */
+
+const state = 'This is editable plain text, just like a <textarea>!'
+
+/**
+ * App.
+ */
+
+class App extends React.Component {
+
+  state = {
+    state: Plaintext.deserialize(state)
+  };
+
+  render() {
+    return (
+      <Editor
+        state={this.state.state}
+        onChange={(state) => {
+          console.groupCollapsed('Change!')
+          console.log('Document:', state.document.toJS())
+          console.log('Selection:', state.selection.toJS())
+          console.log('Content:', Plaintext.serialize(state))
+          console.groupEnd()
+          this.setState({ state })
+        }}
+      />
+    )
+  }
+
+}
+
+/**
+ * Attach.
+ */
+
+const app = <App />
+const root = document.body.querySelector('main')
+ReactDOM.render(app, root)