Comments (5)
Sure!
from popcode.
Hey @outoftime, I've been working on a solution to this with @paulproteus, using CodeMirror's blockComment function. If I submit a pull request for the feature, would you want to enable it? If not, no worries, I'm learning a lot in the process anyway. :)
from popcode.
Hey @outofotime!
We (@paulproteus and I) worked on this today, and came up with this implementation:
diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
index 10c173e..878e37a 100644
--- a/src/components/Editor.jsx
+++ b/src/components/Editor.jsx
@@ -13,6 +13,7 @@ import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/edit/matchbrackets';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/selection/active-line';
+import 'codemirror/addon/comment/comment';
import {EditorLocation} from '../records';
import bowser from '../services/bowser';
@@ -121,6 +122,22 @@ export default function Editor({
editor.setOption('extraKeys', {
[`${modifier}-I`]: onAutoFormat,
[`${modifier}-S`]: onSave,
+ [`${modifier}-/`]: () => {
+ // Get the current selection, defined by these two getCursor() calls
+ const head = editor.doc.getCursor('head');
+ const anchor = editor.doc.getCursor('anchor');
+ // Convert them into two items in an array so we can sort them, so that blockComment() can
+ // go from the start to the end
+ const positions = [
+ [head.line, head.ch],
+ [anchor.line, anchor.ch],
+ ];
+ positions.sort();
+ editor.blockComment(
+ {line: positions[0][0], ch: positions[0][1]},
+ {line: positions[1][0], ch: positions[1][1]},
+ );
+ },
});
}, [onAutoFormat, onSave]);
This would directly configure CodeMirror to respond to the Ctrl-/ (or Cmd-/) event, rather than pass it through Redux.
The main reason we went that route was because we weren't sure if we could call editor.blockComment()
from within Redux. What we seemed to find was that the onAutoFormat
function would return new text which contained the new modified autoformatted text, whereas our code relies on CodeMirror to modify the contents of the editor itself.
The main question -- is that OK to ask CodeMirror to modify the contents of the editor by itself?
If not, then we'll need a way to get the current selection in a Redux context, and also to figure out what to do with it (can we call blockComment()
directly? is the editor
available in a Redux context?).
Looking for advice, and also, if this is more trouble than it's worth, we can switch to a different issue. Wanted to do this to learn more. :)
One thing we noticed while leaving this comment is that we could easily write a function that takes the editor
object and does this work, rather than doing it imperatively right there.
from popcode.
@thayerve I think you can also use the toggleComment
method which is added by importing codemirror/addon/comment/comment
.
import 'codemirror/addon/comment/comment';
...
useEffect(() => {
const editor = editorRef.current;
const modifier = bowser.isOS('macOS') ? 'Cmd' : 'Ctrl';
editor.setOption('extraKeys', {
[`${modifier}-I`]: onAutoFormat,
[`${modifier}-S`]: onSave,
[`${modifier}-/`]: cm => cm.toggleComment({indent: true}),
});
}, [onAutoFormat, onSave]);
from popcode.
@outoftime since #2386 is merged, I propose you mark this issue as closed since I think it's now fixed!
from popcode.
Related Issues (20)
- Support camera API in previews
- Cannot read property 'toString' of undefined HOT 4
- Cannot read property 'toString' of undefined HOT 1
- Bug: Popcode console is not updating with console.log or errors HOT 8
- User Feedback
- Can't log in with Google HOT 1
- User Feedback
- e.SHEBANG is not a function
- Add a “Beautify” button for users on iPad (which has no ctrl/cmmd key) HOT 12
- Backtick in CSS causes UI to crash HOT 1
- User Feedback
- The user denied permission to use Service Worker.
- HTML, CSS and JS Tabs (still) obscure first two lines HOT 1
- Page title bar overflows and has odd sizing behavior on small and/or zoomed screens HOT 1
- User Feedback
- <h1> within <p> causes following closing tags to turn red
- Add support for CSS property object-fit
- 401 unauthorized error when trying to export to Github from Popcode
- Diaeresis marks on international keyboards cause an error. A warning message might be more appropriate.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from popcode.