Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Resolves gh-1 and gh-2: Upgrades to CM 5.6. Expands README. #3

Merged
merged 1 commit into from Dec 24, 2015
Merged

Resolves gh-1 and gh-2: Upgrades to CM 5.6. Expands README. #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 35 additions & 1 deletion README.md
View file
Open in desktop
@@ -1 +1,35 @@
A [Fluid Infusion](https://github.com/fluid-project/infusion) wrapper for the CodeMirror editor.
# CodeMirror Infusion

A [Fluid Infusion](https://github.com/fluid-project/infusion) wrapper for the CodeMirror editor.

## Running the demo

1. Run <code>npm install</code> to install all of <code>codemirror-infusion</code>'s dependencies.
2. Open <code>demo/demo.html</code> in your browser.


## Using it in your own project

CodeMirror-Infusion is available via both the [npm](npmjs.org) and [bower](bower.io) package managers.

### Installing with npm

Include codemirror-infusion in your project's <code>package.json</code> file:

"dependencies": {
"codemirror-infusion": "2.1.0"
}

In your project's root, run <code>npm install</code> to install your dependencies.

### Installing with Bower

Include codemirror-infusion in your project's <code>bower.json</code> file:

"dependencies": {
"codemirror-infusion": "5.6.0"
}

In your project's root, run <code>bower install</code> to install your dependencies.

Unfortunately Infusion itself isn't distributed via a Bower package, so you'll need to provide your own copy via an [Infusion custom build](https://github.com/fluid-project/infusion#how-do-i-create-an-infusion-package) or use npm to install it.
7 changes: 4 additions & 3 deletions bower.json
View file
Open in desktop
@@ -1,10 +1,11 @@
{
"name": "codemirror-infusion",
"version": "2.0.0",
"version": "2.1.0",
"main": "src/codemirror-infusion.js",
"ignore": [".gitignore", "demo"],
"dependencies": {
"codemirror": "4.5.0",
"jsonlint": "1.6.0"
"codemirror": "5.6.0",
"jsonlint": "1.6.0",
"jquery": "2.1.4"
}
}
32 changes: 32 additions & 0 deletions demo/demo.css
View file
Open in desktop
@@ -0,0 +1,32 @@
html, body, #editor {
height: 100%;
width: 100%;
background: #272822;
font-size: 110%;
margin-left: 0;
}

h1 {
width: 100%;
margin: 0;
font-size: 100%;
color: #fff;
font-family: sans-serif;
padding: 1em 1em 1em 0.5em;
border-bottom: 1px solid #49483e;
}

.CodeMirror {
height: 100%;
width: 100%;
}

.CodeMirror-scroll {
overflow: auto;
}

.cm-s-monokai .CodeMirror-gutters {
background-color: #49483e;
border-right: 1px solid #75715e;
padding-right: 0.25%;
}
28 changes: 24 additions & 4 deletions demo/demo.html
View file
Open in desktop
Expand Up @@ -5,7 +5,9 @@
<meta charset="UTF-8" />

<link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css" />
<link rel="stylesheet" href="../node_modules/codemirror/theme/monokai.css" />
<link rel="stylesheet" href="../node_modules/codemirror/addon/lint/lint.css" />
<link rel="stylesheet" href="demo.css" />

<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/codemirror/lib/codemirror.js"></script>
Expand All @@ -28,21 +30,39 @@
</head>

<body>
<h1>CodeMirror Infusion Demo</h1>

<h1>CodeMirror Infusion JSON Editor</h1>
<div id="editor"></div>

<script>
window.cm = fluid.lintingCodeMirror("#editor", {
mergePolicy: {
"value": "noexpand"
},

mode: "application/json",
autoCloseBrackets: true,
matchBrackets: true,
smartIndent: true,
theme: "flockingcm",
theme: "monokai",
indentUnit: 4,
tabSize: 4,
lineNumbers: true,
gutters: ["CodeMirror-lint-markers"]
gutters: ["CodeMirror-lint-markers"],
autofocus: true,
value: "{\n \"cat\": {\n \"says\": \"meow!\"\n }\n}\n",
codeMirrorOpts: [
"lineNumbers",
"mode",
"gutters",
"autoCloseBrackets",
"tabSize",
"indentUnit",
"theme",
"smartIndent",
"matchBrackets",
"autofocus",
"value"
]
});
</script>
</body>
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
@@ -1,6 +1,6 @@
{
"name": "codemirror-infusion",
"version": "2.0.0",
"version": "2.1.0",
"description": "An Infusion component wrapper for CodeMirror",
"main": "src/codemirror-infusion.js",
"license": "(BSD-3-Clause OR ECL-2.0)",
Expand All @@ -16,7 +16,7 @@
"keywords": ["codemirror", "infusion"],
"readmeFilename": "README.md",
"dependencies": {
"codemirror": "4.5.0",
"codemirror": "5.6.0",
"jsonlint": "1.6.0",
"jquery": "2.1.4",
"infusion": "fluid-project/infusion#a1e3d601478e57276d4143fca5bcbe00f9c6b0cd"
Expand Down