├── .babelrc
├── .eslintrc
├── .gitignore
├── LICENSE.md
├── Makefile
├── README.md
├── app
├── editor.jsx
└── index.jsx
├── index.html
├── main.js
├── package.json
├── static
└── css
│ ├── index.css
│ └── photon-overrides.css
├── webpack.config.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["stage-1", "react"],
3 | "plugins": [
4 | ["transform-react-jsx",{"pragma": "h"}]
5 | ]
6 | }
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": [
4 | "standard",
5 | "standard-react"
6 | ],
7 | "env": {
8 | "browser": true,
9 | "es6": true,
10 | "node": true
11 | },
12 | /**
13 | * http://eslint.org/docs/rules
14 | * 0: "ignore", 1: "warn", 2: "error"
15 | */
16 | "rules": {
17 | "comma-dangle": [1, "always-multiline"], // trailing comma helps keep diffs clean
18 | "handle-callback-err": [2, "^(err|error)$" ], // require error handling in callbacks
19 | "react/forbid-prop-types": 1, // forbid general proptypes (any, object, array)
20 | "react/jsx-closing-bracket-location": [
21 | 1, "tag-aligned"
22 | ], // align closing bracket with tags (good for diffs)
23 | "react/jsx-equals-spacing": [1, "never"], // enforce or disallow spaces around equal signs in JSX attributes
24 | "react/jsx-handler-names": [
25 | 1, {"eventHandlerPrefix": "handle",
26 | "eventHandlerPropPrefix": "on"}
27 | ], // enforce event handler naming conventions
28 | "react/jsx-key": 1, // detect missing key in iterated components
29 | "react/jsx-max-props-per-line": [
30 | 1, { "maximum": 2 }
31 | ], // maximum props per line
32 | "react/jsx-no-undef": 1, // disallow undeclared variables in JSX
33 | "react/jsx-pascal-case": 1, // enforce PascalCase component names
34 | "react/jsx-space-before-closing": 1, // validate spacing before closing bracket in JSX
35 | "react/jsx-uses-vars": 1, // prevent variables used in JSX being marked as unused
36 | "react/jsx-wrap-multilines": 1, // prevent missing parentheses around multilines JSX
37 | "react/no-children-prop": 1, // prevent passing children as props instead of wrapping
38 | "react/no-deprecated": 2, // prevent usage of deprecated methods
39 | "react/no-did-mount-set-state": 2, // prevent changing state right after mount
40 | "react/no-did-update-set-state": 2, // prevent changing state after another state change
41 | "react/no-direct-mutation-state": 2, // prevent mutating this.state outside of setState
42 | "react/no-is-mounted": 2, // isMounted is an anti-pattern
43 | "react/no-string-refs": 2, // prevent using string references instead of ref callbacks
44 | "react/no-unknown-property": 1, // prevent usage of unknown DOM property
45 | "react/no-unused-prop-types": [
46 | 1, { "skipShapeProps": true }
47 | ], // warn about unused proptypes
48 | "react/prefer-es6-class": [1, "always"], // prefer es6 class to createClass
49 | "react/prefer-stateless-function": [
50 | 1, { "ignorePureComponents": true }
51 | ], // replace stateless components with a pure function
52 | "react/prop-types": 2, // prevent missing props validation
53 | "react/require-render-return": 2, // enforce return value in render function
54 | "react/self-closing-comp": 1, // prevent extra closing tags for components without children
55 | "react/sort-comp": 2, // methods order (default [static, lifecycle, custom, render])
56 | "react/style-prop-object": 2, // enforce style prop being an object
57 | "standard/object-curly-even-spacing": [
58 | 1, "always"
59 | ] // enforce space inside { braces }
60 | }
61 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Alex Krolick
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | WEBPACK=./node_modules/.bin/webpack
2 | ELECTRON=./node_modules/.bin/electron
3 |
4 | start:
5 | $(ELECTRON) .
6 |
7 | watch:
8 | $(WEBPACK) --colors --watch
9 |
10 | build:
11 | $(WEBPACK) --production
12 |
13 | usage:
14 | @echo start: run the app
15 | @echo watch: compile the app in dev mode and watch for changes
16 | @echo build: compile the app in production mode
17 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Preact + Quill + Electron
2 |
3 | A desktop text editor app built with [Electron] using the [Preact-Photon] UI library, [Yarn] for package management, and [Babel] and [Webpack2] for compilation.
4 |
5 | [Preact-Photon]: https://github.com/developit/preact-photon
6 | [Yarn]: https://yarnpkg.com/en/
7 | [Babel]: https://babeljs.io/
8 | [Webpack2]: https://webpack.js.org/
9 | [Electron]: http://electron.atom.io/
10 |
11 | See [package.json](./package.json) for scripts and dependencies, including:
12 | - [Preact](https://preactjs.com/)
13 | - [Photon](http://photonkit.com/)
14 | - [Electron](http://electron.atom.io/)
15 | - [Quill Editor](https://quilljs.com)
16 |
17 | ## Usage
18 |
19 | First, install [Yarn] for your system (you can replace `yarn` with `npm` below if you don't wish to switch yet)
20 | - `yarn install` Install dependencies.
21 | - `yarn watch` Compile development version and watch for changes. Bundled files will appear in `dist/`.
22 | - `yarn start` Start the desktop app (while watcher is running in another terminal). Use Ctrl-R or Cmd-R to reload the app.
23 |
24 | 
25 |
--------------------------------------------------------------------------------
/app/editor.jsx:
--------------------------------------------------------------------------------
1 | /** @jsx h */
2 | import { h, Component } from 'preact'
3 | import { PropTypes } from 'react'
4 | import Quill from 'quill'
5 |
6 | class Editor extends Component {
7 | constructor (props) {
8 | super(props)
9 | this.state = {
10 | html: '',
11 | editor: null,
12 | }
13 | }
14 |
15 | componentDidMount () {
16 | this.editor = new Quill(this.props.container, {
17 | theme: this.props.theme,
18 | placeholder: this.props.placeholder,
19 | })
20 | // Set global reference to editor so IO functions can interact with it
21 | this.context.setEditor(this.editor)
22 | }
23 |
24 | shouldComponentUpdate (nextProps, nextState) {
25 | return false
26 | }
27 |
28 | render () {
29 | return
30 | }
31 | }
32 |
33 | Editor.propTypes = {
34 | placeholder: PropTypes.string,
35 | container: PropTypes.string.isRequired,
36 | theme: PropTypes.oneOf(['snow', 'bubble']),
37 | }
38 |
39 | Editor.contextTypes = {
40 | setEditor: PropTypes.func,
41 | }
42 |
43 | Editor.defaultProps = {
44 | placeholder: '',
45 | theme: 'snow',
46 | }
47 |
48 | export default Editor
49 |
--------------------------------------------------------------------------------
/app/index.jsx:
--------------------------------------------------------------------------------
1 | /** @jsx h */
2 | import { h, render, Component } from 'preact'
3 | import { Header, Title, Footer, Button, ButtonGroup, NavGroup } from 'preact-photon'
4 | import Quill from './editor.jsx'
5 | import { remote } from 'electron'
6 | import fs from 'mz/fs'
7 | const { dialog } = remote
8 |
9 | // Wrap inconvenient APIs with promises
10 | function showSaveDialogAsync (options) {
11 | return new Promise((resolve, reject) => {
12 | try {
13 | const files = dialog.showSaveDialog(options || {})
14 | resolve(files)
15 | } catch (err) {
16 | reject(err)
17 | }
18 | })
19 | }
20 |
21 | function showOpenDialogAsync (options) {
22 | const htmlDefaults = {
23 | properties: ['openFile'],
24 | filters: [
25 | { name: 'HTML Documents',
26 | extensions: ['html', 'htm', 'shtml', 'xhtml'],
27 | },
28 | ],
29 | }
30 | return new Promise((resolve, reject) => {
31 | try {
32 | const files = dialog.showOpenDialog(options || htmlDefaults)
33 | resolve(files)
34 | } catch (err) {
35 | reject(err)
36 | }
37 | })
38 | }
39 |
40 | function saveFileAsync (fileName, content) {
41 | if (typeof fileName !== 'string') throw Error('Filename must be a string')
42 | return fs.writeFile(fileName, content)
43 | }
44 |
45 | const Sidebar = () => (
46 |
47 |
48 | Places
49 | Home
50 |
51 |
52 | )
53 |
54 | class App extends Component {
55 |
56 | constructor (props) {
57 | super(props)
58 | this.state = {
59 | editor: null,
60 | title: 'Electron Quill',
61 | }
62 | }
63 |
64 | getChildContext () {
65 | return {
66 | setEditor: (editor) => {
67 | this.setState({ editor: editor })
68 | },
69 | }
70 | }
71 |
72 | componentDidMount () {
73 | this.state.editor.focus()
74 | }
75 |
76 | handleClickSave = () => {
77 | if (typeof this.state.editor !== 'object') return
78 | if (!(this.state.editor.root instanceof Element)) return
79 | const content = this.state.editor.root.innerHTML
80 | showSaveDialogAsync()
81 | .then((filename) => saveFileAsync(filename, content))
82 | .then((filename) => this.setState({ title: filename }))
83 | .catch((err) => console.error(err))
84 | }
85 |
86 | handleClickOpen = () => {
87 | showOpenDialogAsync()
88 | .then((filenames) => {
89 | this.setState({ title: filenames[0] })
90 | return fs.readFile(filenames[0], 'utf8')
91 | })
92 | .then((content) => this.replaceEditorContents(content))
93 | .catch(console.error)
94 | }
95 |
96 | handleClickNew = () => {
97 | this.replaceEditorContents('')
98 | }
99 |
100 | replaceEditorContents = (content) => {
101 | // TODO confirm contents have been saved before overriding
102 | try {
103 | this.state.editor.setText('\n')
104 | this.state.editor.clipboard.dangerouslyPasteHTML(0, content)
105 | this.state.editor.focus()
106 | return
107 | } catch (err) {
108 | throw err // handle in promise
109 | }
110 | }
111 |
112 | render () {
113 | return (
114 |
115 |
138 |
139 |
152 |
153 |
158 |