├── .babelrc
├── .editorconfig
├── .gitignore
├── .travis.yml
├── LICENSE.md
├── README.md
├── example.gif
├── extension
├── content-script
│ ├── defaults.js
│ ├── dom.js
│ ├── extension.css
│ ├── gh-theme.css
│ ├── hotkey.js
│ ├── index.js
│ ├── on-page-nav.js
│ └── tab-handler.js
├── manifest.json
├── options-page
│ ├── index.js
│ ├── options.css
│ └── options.html
├── options.json
├── pagenav-listener.js
└── util
│ └── settings.js
└── package.json
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["transform-es2015-modules-commonjs"]
3 | }
4 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | end_of_line = lf
7 | insert_final_newline = true
8 | trim_trailing_whitespace = true
9 |
10 | [*.js]
11 | indent_size = 4
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
2 | node_modules
3 | dist
4 | chrome.zip
5 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - 'node'
4 | deploy:
5 | provider: script
6 | script: npm run release
7 | on:
8 | branch: master
9 | tags: true
10 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Andrew Levine
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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # OctoEdit
2 |
3 | A Chrome Extension that adds a new tab to the comment edit area in GitHub, providing Markdown syntax highlighting and tabbing behavior.
4 |
5 | _Huge_ thanks to [CodeMirror](https://codemirror.net/) and [Marijn Haverbeke](https://github.com/marijnh) for providing a free, MIT-licensed editor.
6 |
7 | 
8 |
9 | ## Install
10 |
11 | - [Chrome Store](https://chrome.google.com/webstore/detail/octoedit/ecnglinljpjkbgmdpeiglonddahpbkeb)
12 |
13 | ## Features
14 |
15 | - Markdown syntax highlighting
16 | - Syntax Highlighting for most popular languages within GFM fences
17 | - Support for GitHub hotkey(`shift + meta + p`) to cycle through comment tabs
18 |
19 | ## Developing
20 |
21 | 1. Clone the repository
22 | 2. Run `npm run watch` to enable rebuilds on change
23 | 3. Load the `dist` folder as an [unpacked extension](https://developer.chrome.com/extensions/getstarted#unpacked) in Chrome
24 |
25 | ## Thank you to these contributors
26 |
27 | - [James Talmage](https://github.com/jamestalmage)
28 |
--------------------------------------------------------------------------------
/example.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DrewML/OctoEdit/be382563517a7d3fdd729cf62268e7cb9d5d3c1b/example.gif
--------------------------------------------------------------------------------
/extension/content-script/defaults.js:
--------------------------------------------------------------------------------
1 | import options from '../options.json';
2 |
3 | const defaultOptions = Object.keys(options).reduce((agg, key) => {
4 | agg[key] = options[key].defaultVal;
5 | return agg;
6 | }, {});
7 |
8 | export default defaultOptions;
9 |
--------------------------------------------------------------------------------
/extension/content-script/dom.js:
--------------------------------------------------------------------------------
1 | export const $$ = document.querySelectorAll.bind(document);
2 |
3 | export function removeClasses(el, ...classList) {
4 | classList.forEach(className => el.classList.remove(className));
5 | }
6 |
7 | export function removeElement(el) {
8 | el.parentElement.removeChild(el);
9 | }
10 |
11 | export function hasClass(el, className) {
12 | return el.classList.contains(className);
13 | }
14 |
--------------------------------------------------------------------------------
/extension/content-script/extension.css:
--------------------------------------------------------------------------------
1 | @import "node_modules/codemirror/lib/codemirror.css";
2 | @import "./gh-theme.css";
3 |
4 | .octo-edit-area {
5 | margin: 0 10px 10px;
6 | border: 1px solid #ddd;
7 | }
8 |
9 | .code-selected .toolbar-commenting {
10 | display: none;
11 | }
12 |
--------------------------------------------------------------------------------
/extension/content-script/gh-theme.css:
--------------------------------------------------------------------------------
1 | .CodeMirror {
2 | font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
3 | font-size: 14px;
4 | }
5 |
6 | .cm-header-1 {
7 | font-size: 2.25em;
8 | }
9 |
10 | .cm-header-2 {
11 | font-size: 1.75em;
12 | }
13 |
14 | .cm-header-3 {
15 | font-size: 1.5em;
16 | }
17 |
18 | .cm-header-4 {
19 | font-size: 1.25em;
20 | }
21 |
22 | .cm-header-5 {
23 | font-size: 1em;
24 | }
25 |
26 | .cm-header-6 {
27 | font-size: 1em;
28 | color: #777;
29 | }
30 |
31 | .cm-keyword,
32 | .cm-operator {
33 | color: #a71d5d;
34 | }
35 |
36 | .cm-s-default .cm-def,
37 | .cm-s-default .cm-builtin {
38 | color: #0086b3;
39 | }
40 |
41 | .cm-s-default .cm-string {
42 | color: #183691;
43 | }
44 |
45 | .cm-s-default .cm-url {
46 | color: #4078c0
47 | }
48 |
49 | .cm-variable,
50 | .cm-s-default .cm-variable-2 {
51 | color: #795da3;
52 | }
53 |
54 | .cm-property {
55 | color: #0086b3;
56 | }
57 |
58 | .cm-s-default .cm-quote {
59 | color: #777;
60 | border-left: 4px solid #ddd;
61 | }
62 |
63 | .cm-keyword,
64 | .cm-operator,
65 | .cm-def,
66 | .cm-string,
67 | .cm-url,
68 | .cm-variable,
69 | .cm-variable-2,
70 | .cm-variable-3,
71 | .cm-property,
72 | .cm-quote,
73 | .cm-comment,
74 | .cm-number,
75 | .cm-builtin {
76 | font-family: monospace;
77 | }
78 |
--------------------------------------------------------------------------------
/extension/content-script/hotkey.js:
--------------------------------------------------------------------------------
1 | const P_KEY = 80;
2 |
3 | function toggleTab(e) {
4 | // Note: When more than one comment field is visible, this always uses the
5 | // first in the DOM. This is 1:1 with how GitHub's own code handles it
6 | const previewTab = document.querySelector('.js-preview-tab.selected');
7 | const codeTab = document.querySelector('.js-octo-edit-tab.selected');
8 | if (!(previewTab || codeTab)) return;
9 |
10 | e.preventDefault();
11 | e.stopPropagation();
12 |
13 | if (previewTab) {
14 | previewTab.closest('form').querySelector('.js-octo-edit-tab').click();
15 | } else {
16 | codeTab.closest('form').querySelector('.js-write-tab').click();
17 | }
18 | }
19 |
20 | export default function init(cb) {
21 | // Note: Purposely on document.body rather than document,
22 | // to allow catching hotkey before GitHub stops the event
23 | document.body.addEventListener('keydown', e => {
24 | const { keyCode, metaKey, shiftKey } = e;
25 |
26 | if (keyCode === P_KEY && metaKey && shiftKey) {
27 | toggleTab(e);
28 | }
29 | });
30 | }
31 |
--------------------------------------------------------------------------------
/extension/content-script/index.js:
--------------------------------------------------------------------------------
1 | import './extension.css';
2 | import codeMirror from 'codemirror';
3 | import tabHandler from './tab-handler';
4 | import onPageNav from './on-page-nav';
5 | import initHotkey from './hotkey';
6 | import defaultSettings from './defaults';
7 | import { getSettings } from '../util/settings';
8 | import 'codemirror/addon/edit/matchbrackets';
9 | import 'codemirror/addon/edit/matchtags';
10 | import 'codemirror/addon/edit/closebrackets';
11 | import 'codemirror/addon/edit/closetag';
12 |
13 | const bulk = require('bulk-require');
14 | bulk(__dirname, '../../node_modules/codemirror/mode/*/*.{css,js}');
15 |
16 | getSettings(defaultSettings).then(settings => {
17 | const tabs = tabHandler();
18 | initHotkey();
19 |
20 | function onTabEnter(wrapper, form) {
21 | const plainTextArea = form.querySelector('.js-comment-field');
22 | const editor = codeMirror(wrapper, {
23 | mode: 'gfm',
24 | lineNumbers: settings.showLineNumbers,
25 | autofocus: true,
26 | lineWrapping: settings.enableWordWrap,
27 | value: plainTextArea.value,
28 | tabSize: settings.tabCharSize,
29 | matchBrackets: true,
30 | autoCloseBrackets: true,
31 | matchTags: true,
32 | autoCloseTags: true
33 | });
34 |
35 | editor.on('change', () => {
36 | plainTextArea.value = editor.getValue();
37 | });
38 | }
39 |
40 | function onTabLeave(form) {
41 | // Will be needed eventually
42 | }
43 |
44 | function addTab() {
45 | tabs.addTab({
46 | title: settings.tabName,
47 | onEnter: onTabEnter,
48 | onLeave: onTabLeave
49 | });
50 | }
51 |
52 | onPageNav(addTab);
53 | addTab();
54 | }).catch(err => {
55 | console.error('An error occurred with OctoEdit. Please report an issue on GitHub');
56 | console.error(err);
57 | });
58 |
--------------------------------------------------------------------------------
/extension/content-script/on-page-nav.js:
--------------------------------------------------------------------------------
1 | function injectJSFile(path) {
2 | const script = document.createElement('script');
3 | script.src = chrome.extension.getURL(path);
4 | document.documentElement.appendChild(script);
5 | }
6 |
7 | injectJSFile('pagenav-listener.js');
8 |
9 | export default function onPageNav(cb) {
10 | window.addEventListener('message', ({ data } = {}) => {
11 | if (data.octoEdit && data.partialNav) cb();
12 | });
13 | }
14 |
--------------------------------------------------------------------------------
/extension/content-script/tab-handler.js:
--------------------------------------------------------------------------------
1 | import {
2 | $$,
3 | removeClasses,
4 | removeElement,
5 | hasClass
6 | } from './dom';
7 |
8 | // Warning: Dumb code lies ahead. This class pretends it supports
9 | // adding different/multiple tabs, but makes way too many assumptions.
10 | // Good enough for the current use-case.
11 |
12 | const EDIT_AREA_CLASS = 'octo-edit-area';
13 | const SELECTED_FORM_CLASS = 'code-selected';
14 | const GH_COMMENT_FORM_CLASS = 'js-previewable-comment-form';
15 |
16 | class TabHandler {
17 | constructor() {
18 | this.handlers = new WeakMap();
19 | this._initListeners();
20 | }
21 |
22 | addTab({ title, onEnter, onLeave }) {
23 | this._removeStaleTabs();
24 |
25 | const tabStrips = Array.from($$(`.${GH_COMMENT_FORM_CLASS} .tabnav-tabs`));
26 | const btns = tabStrips.map(tabStrip => {
27 | const btn = this._createButton(title);
28 | tabStrip.appendChild(btn);
29 | return btn;
30 | });
31 |
32 | this._registerButtons(btns, onEnter, onLeave);
33 | }
34 |
35 | _removeStaleTabs() {
36 | // Necessary on back/forward in history. GitHub restores
37 | // the DOM from a string of markup captured before the page navigation.
38 | // which uses new elements so, although the tabs appear on the page,
39 | // we have no reference to them in this.handlers
40 | const tabs = document.querySelectorAll('.js-octo-edit-tab');
41 | if (tabs) Array.from(tabs).forEach(tab => removeElement(tab));
42 | }
43 |
44 | _createButton(title) {
45 | const btn = document.createElement('button');
46 | btn.className = 'btn-link tabnav-tab js-octo-edit-tab';
47 | btn.textContent = title;
48 |
49 | return btn;
50 | }
51 |
52 | _createWrapper() {
53 | const wrapper = document.createElement('div');
54 | wrapper.classList.add(EDIT_AREA_CLASS);
55 | return wrapper;
56 | }
57 |
58 | _registerButtons(btns = [], onEnter, onLeave) {
59 | const { handlers } = this;
60 |
61 | for (const btn of btns) {
62 | const form = this._getCommentFormFromChild(btn);
63 | handlers.set(form, { onEnter, onLeave });
64 | }
65 | }
66 |
67 | _getCommentFormFromChild(el) {
68 | return el.closest(`.${GH_COMMENT_FORM_CLASS}`);
69 | }
70 |
71 | _initListeners() {
72 | const { handlers } = this;
73 |
74 | document.body.addEventListener('click', e => {
75 | const octoEditOpen = e.target.closest(`.${SELECTED_FORM_CLASS}`);
76 |
77 | if (hasClass(e.target, 'js-octo-edit-tab')) {
78 | e.preventDefault();
79 | if (octoEditOpen) return;
80 |
81 | this._onBtnClick(e.target);
82 | return;
83 | }
84 |
85 | if (hasClass(e.target, 'tabnav-tab') && octoEditOpen) {
86 | this._onTabLeave(this._getCommentFormFromChild(e.target));
87 | }
88 | });
89 |
90 | document.body.addEventListener('submit', e => {
91 | if (!hasClass(e.target, 'js-new-comment-form')) {
92 | return;
93 | }
94 |
95 | this._onTabLeave(e.target.querySelector(`.${GH_COMMENT_FORM_CLASS}`));
96 | });
97 | }
98 |
99 | _onBtnClick(btn) {
100 | const { handlers } = this;
101 | const form = this._getCommentFormFromChild(btn);
102 |
103 | removeClasses(form.querySelector('.tabnav-tab.selected'), 'selected');
104 | removeClasses(form, 'write-selected', 'preview-selected');
105 |
106 | btn.classList.add('selected');
107 | form.classList.add(SELECTED_FORM_CLASS);
108 |
109 | const previewWrapper = form.querySelector('.preview-content');
110 | const codeWrapper = this._createWrapper();
111 | previewWrapper.parentElement.insertBefore(codeWrapper, previewWrapper);
112 |
113 | handlers.get(form).onEnter(codeWrapper, form);
114 | }
115 |
116 | _onTabLeave(form) {
117 | const { handlers } = this;
118 |
119 | removeClasses(form, SELECTED_FORM_CLASS);
120 | removeElement(form.querySelector(`.${EDIT_AREA_CLASS}`));
121 |
122 | handlers.get(form).onLeave(form);
123 | }
124 | }
125 |
126 | export default () => new TabHandler();
127 |
--------------------------------------------------------------------------------
/extension/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "OctoEdit",
3 | "version": "0.5.1",
4 | "description": "Syntax Highlighting mini-editor for GitHub.com",
5 | "manifest_version": 2,
6 | "permissions": [
7 | "storage"
8 | ],
9 | "options_page": "options.html",
10 | "options_ui": {
11 | "page": "options.html",
12 | "chrome_style": true
13 | },
14 | "content_scripts": [{
15 | "matches": ["*://github.com/*"],
16 | "js": ["content-script.js"],
17 | "run_at": "document_idle"
18 | }],
19 | "web_accessible_resources": [
20 | "pagenav-listener.js"
21 | ]
22 | }
23 |
--------------------------------------------------------------------------------
/extension/options-page/index.js:
--------------------------------------------------------------------------------
1 | import options from '../options.json';
2 | import { getSettings, saveSettings } from '../util/settings';
3 |
4 | const KEY_ATTR = 'data-key';
5 |
6 | const markupGenerators = {
7 | bool: (key, value, descrip) => (`
8 |
16 | `),
17 | string: (key, value, descrip) => (`
18 | ${descrip}
19 |
20 |
21 |
22 | `)
23 | };
24 |
25 | getSettings().then(settings => {
26 | function getValue(key, defVal) {
27 | return settings.hasOwnProperty(key) ? settings[key] : defVal;
28 | }
29 |
30 | function generateOptionsMarkup(options) {
31 | return Object.keys(options).map(key => {
32 | const { type, descrip, defaultVal } = options[key];
33 | const markup = markupGenerators[type](key, getValue(key, defaultVal), descrip);
34 |
35 | return `${markup}`;
36 | }).join('');
37 | }
38 |
39 | document.querySelector('.options-list').innerHTML = generateOptionsMarkup(options);
40 | });
41 |
42 | document.querySelector('.save-btn').addEventListener('click', () => {
43 | const inputs = document.querySelectorAll(`[${KEY_ATTR}]`);
44 |
45 | const settings = Array.from(inputs).reduce((settings, input) => {
46 | const key = input.getAttribute(KEY_ATTR);
47 | const value = input.type === 'text' ? input.value : input.checked;
48 |
49 | settings[key] = value;
50 | return settings;
51 | }, {});
52 |
53 | saveSettings(settings);
54 | });
55 |
--------------------------------------------------------------------------------
/extension/options-page/options.css:
--------------------------------------------------------------------------------
1 | .options-list {
2 | list-style-type: none;
3 | padding: 0;
4 | }
5 |
6 | .options-list li{
7 | margin-top: 2%;
8 | }
9 |
10 | .save {
11 | text-align: center;
12 | }
13 |
--------------------------------------------------------------------------------
/extension/options-page/options.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/extension/options.json:
--------------------------------------------------------------------------------
1 | {
2 | "enableWordWrap": {
3 | "defaultVal": true,
4 | "type": "bool",
5 | "descrip": "Enable Word Wrap"
6 | },
7 | "showLineNumbers": {
8 | "defaultVal": true,
9 | "type": "bool",
10 | "descrip": "Show Line Numbers"
11 | },
12 | "tabName": {
13 | "defaultVal": "Code",
14 | "type": "string",
15 | "descrip": "Custom Tab Name"
16 | },
17 | "tabCharSize": {
18 | "defaultVal": "4",
19 | "type": "string",
20 | "descrip": "Tab Size"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/extension/pagenav-listener.js:
--------------------------------------------------------------------------------
1 | window.addEventListener('pjax:success', postMsg);
2 | window.addEventListener('statechange', postMsg);
3 |
4 | function postMsg() {
5 | window.postMessage({
6 | octoEdit: true,
7 | partialNav: true
8 | }, '*');
9 | }
10 |
--------------------------------------------------------------------------------
/extension/util/settings.js:
--------------------------------------------------------------------------------
1 | export function getSettings(defaults) {
2 | return new Promise((res, rej) => {
3 | chrome.storage.sync.get(defaults, options => {
4 | if (chrome.runtime.lastError) {
5 | rej(chrome.runtime.lastError);
6 | return;
7 | }
8 |
9 | res(options);
10 | });
11 | });
12 | }
13 |
14 | export function saveSettings(settings) {
15 | return new Promise((res, rej) => {
16 | chrome.storage.sync.set(settings, () => {
17 | if (chrome.runtime.lastError) {
18 | rej(chrome.runtime.lastError);
19 | return;
20 | }
21 |
22 | res();
23 | });
24 | });
25 | }
26 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "octo-edit",
3 | "description": "Syntax Highlighting mini-editor for GitHub.com",
4 | "scripts": {
5 | "build": "npm-run-all clean --parallel build:content build:options copy",
6 | "watch": "npm-run-all --parallel watch:files watch:content watch:options",
7 | "build:content": "browserify -v -d extension/content-script/ -o dist/content-script.js",
8 | "build:options": "browserify -v -d extension/options-page/ -o dist/options.js",
9 | "watch:content": "watchify -v -d extension/content-script/ -o dist/content-script.js",
10 | "watch:options": "watchify -v -d extension/options-page/ -o dist/options.js",
11 | "watch:files": "watch 'npm run copy' extension",
12 | "copy": "cpy 'extension/*.*' 'extension/options-page/*.{html,css}' '!*/options.json' dist",
13 | "clean": "rimraf dist && mkdir dist",
14 | "release": "npm run build && webstore upload --source dist --auto-publish"
15 | },
16 | "author": "Andrew Levine",
17 | "devDependencies": {
18 | "babel-core": "^6.3.15",
19 | "babel-plugin-transform-es2015-modules-commonjs": "^6.8.0",
20 | "babelify": "^7.2.0",
21 | "browserify": "^11.2.0",
22 | "browserify-css": "^0.9.1",
23 | "bulkify": "^1.2.0",
24 | "chrome-webstore-upload-cli": "^1.0.0",
25 | "cpy-cli": "^1.0.0",
26 | "mkdir": "0.0.2",
27 | "npm-run-all": "^1.5.3",
28 | "rimraf": "^2.5.2",
29 | "watch": "^0.18.0",
30 | "watchify": "^3.7.0"
31 | },
32 | "dependencies": {
33 | "bulk-require": "^0.2.1",
34 | "codemirror": "^5.14.2"
35 | },
36 | "browserify": {
37 | "transform": [
38 | "browserify-css",
39 | "babelify",
40 | "bulkify"
41 | ]
42 | }
43 | }
44 |
--------------------------------------------------------------------------------