Skip to content

Commit

Permalink
Update to PlainEditable 2.0.0
Browse files Browse the repository at this point in the history
Text ↔ HTML conversion is now handled by PlainEditable.

Single line restriction is now handled by PlainEditable.

Placeholder values are now displayed any time an editable value becomes blank,
not just initially.
  • Loading branch information
insin committed Feb 26, 2015
1 parent 1f22015 commit 3677783
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 48 deletions.
8 changes: 8 additions & 0 deletions CHANGES.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
## 0.5 / 2015-02-26

Updated [`PlainEditable`](https://github.com/insin/react-plain-editable) to
version 2.0.0 - now uses plain text for storage.

Placeholder values are now displayed any time an editable value becomes blank,
not just initially.

## 0.4 / 2015-02-24

`##` headings now win if both supported heading types are detected when
Expand Down
68 changes: 20 additions & 48 deletions app.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,30 +32,6 @@ var trim = (() => {
return (text) => text ? text.replace(trimRE, '') : ''
})()

var escapeHTML = (() => {
var escapeRE = /[&><]/g
var escapes = {'&': '&amp;', '>': '&gt;', '<': '&lt;'}
var escaper = (match) => escapes[match]
return (text) => text.replace(escapeRE, escaper)
})()

var unescapeHTML = (() => {
var unescapeRE = /&(?:amp|gt|lt);/g
var unescapes = {'&amp;': '&', '&gt;': '>', '&lt;': '<'}
var unescaper = (match) => unescapes[match]
return (text) => text.replace(unescapeRE, unescaper)
})()

var linebreaksToBr = (() => {
var linebreaksRE = /\r\n|\r|\n/g
return (text) => text.replace(linebreaksRE, '<br>')
})()

var brsToLinebreak = (() => {
var brRE = /<br>/g
return (text) => text.replace(brRE, '\n')
})()

function utf8ToBase64(text) {
return window.btoa(unescape(encodeURIComponent(text)))
}
Expand Down Expand Up @@ -93,10 +69,14 @@ var GENERAL_KEY = 'imd:general'
var SECTIONS_KEY = 'imd:sections'
var EXPORT_FORMAT_KEY = 'imd:export'

var DEFAULT_SECTION = {section: '[section]', ideas: '[ideas]'}
var GENERAL_PLACEHOLDER = '[general]'
var SECTION_PLACEHOLDER = '[section]'
var IDEAS_PLACEHOLDER = '[ideas]'

var DEFAULT_SECTION = {section: SECTION_PLACEHOLDER, ideas: IDEAS_PLACEHOLDER}

function loadGeneral() {
return localStorage.getItem(GENERAL_KEY) || '[general]'
return localStorage.getItem(GENERAL_KEY) || GENERAL_PLACEHOLDER
}

function saveGeneral(general) {
Expand Down Expand Up @@ -135,10 +115,9 @@ var IdeasStore = {
},

import(state) {
this.general = linebreaksToBr(escapeHTML(state.general))
this.general = state.general
this.sections = state.sections.map(section => {
section.id = ID_SEED++
section.ideas = linebreaksToBr(escapeHTML(section.ideas))
return section
})
this.exportFormat = state.exportFormat
Expand Down Expand Up @@ -214,17 +193,17 @@ function parseFileContents(text) {
}

function createFileContents(general, sections, style) {
var parts = [unescapeHTML(brsToLinebreak(general))]
var parts = [general]
sections.forEach(section => {
var name = unescapeHTML(section.section)
var name = section.section
if (style == 'hash') {
parts.push(`## ${name}`)
}
else if (style == 'underline') {
var underline = name.split(/./g).join('=')
parts.push(`${name}\n${underline}`)
}
parts.push(unescapeHTML(brsToLinebreak(section.ideas)))
parts.push(section.ideas)
})
return parts.join('\n\n')
}
Expand Down Expand Up @@ -265,8 +244,8 @@ var Ideas = React.createClass({
exportFile(contents, 'IDEAS.md')
},

_onBlur(e, html) {
IdeasStore.editGeneral(html)
_onBlur(e, value) {
IdeasStore.editGeneral(value)
},

_onDragOver(e) {
Expand Down Expand Up @@ -297,9 +276,9 @@ var Ideas = React.createClass({
</div>
<div className="Ideas__general">
<PlainEditable
html={this.state.general}
onBlur={this._onBlur}
placeholder="[general]"
value={this.state.general || GENERAL_PLACEHOLDER}
/>
</div>
<div className="Ideas__sections">
Expand All @@ -311,29 +290,22 @@ var Ideas = React.createClass({
onChange={this._onSectionChange}
/>)}
</div>
<footer>ideas-md 0.4 | <a href="https://github.com/insin/ideas-md">insin/ideas-md</a></footer>
<footer>ideas-md 0.5 | <a href="https://github.com/insin/ideas-md">insin/ideas-md</a></footer>
</div>
}
})

var Section = React.createClass({
_onBlur(e, html) {
_onBlur(e, value) {
var field = e.target.getAttribute('data-field')
if (html != this.props[field]) {
if (value != this.props[field]) {
var {id, section, ideas} = this.props
var section = {id, section, ideas}
section[field] = html
section[field] = value
IdeasStore.editSection(section, this.props.index)
}
},

_onKeyDown(e) {
if (e.key == 'Enter') {
e.preventDefault()
e.target.blur()
}
},

_onRemove(e) {
IdeasStore.removeSection(this.props.index)
},
Expand All @@ -350,19 +322,19 @@ var Section = React.createClass({
autoFocus={this.props.isNew}
className="Section__name"
data-field="section"
html={this.props.section}
onBlur={this._onBlur}
onKeyDown={this._onKeyDown}
placeholder="[section]"
singleLine
value={this.props.section || SECTION_PLACEHOLDER}
/>
</h2>
<PlainEditable
className="Section__ideas"
contentEditable="true"
data-field="ideas"
html={this.props.ideas}
onBlur={this._onBlur}
placeholder="[ideas]"
value={this.props.ideas || IDEAS_PLACEHOLDER}
/>
</div>
}
Expand Down

0 comments on commit 3677783

Please sign in to comment.