kazzkiq / codeflask Goto Github PK
View Code? Open in Web Editor NEWA micro code-editor for awesome web pages.
Home Page: https://kazzkiq.github.io/CodeFlask/
License: MIT License
A micro code-editor for awesome web pages.
Home Page: https://kazzkiq.github.io/CodeFlask/
License: MIT License
It would be nice if the autocomplete
, autocorrect
, autocapitalize
and spellcheck
attributes of the relevant textarea
s were set to avoid counter-intuitive behaviour when editing code.
Codeflask generates a textarea without a paired label element, which poses accessibility problems. An easy way to get around it would be to add an areaId
option to specify an id value for the textarea. That way a label element can be paired with it for screen reader users.
I'm not sure if this feature previously existed or if someone on my team hacked in their own fix, but it's super easy to add. I've got it working on my local fork and will contribute it back to you as soon as I add it to the tests.
Similar to issue #4, I'm seeing weird text displacement issues on iOS. Particularly, when trying to scroll upwards before the beginning or downwards past the end of code sections (where you might usually see rubber banding).
Firstly, looks like you released 1.0! Congrats! :D
Unfortunately, it seems that you have introduced inline styles with this update. As someone enforcing a strict Content Security Policy, the reason I was using CodeFlask is precisely because it didn't do this. Please consider changing this new update to remove the inline styles and be more CSP-friendly!
Hi;
How can i use "update" funtion when i using "runAll" ??
Keyboard-only users get stuck in a keyboard trap when tabbing into the editor. It makes it impossible to exit, a huge blocker for people who can't use a mouse or trackpad. One quick and dirty solution would be to wire up the escape key once you tab into the text editor...maybe it could send focus to the next tab stop, allowing you to keep going through the page?
In an ideal world, editing with the keyboard would only start once you'd pressed an "enable editor" button, where combined with the escape key to exit, the user would thus be making a more conscious choice to toggle edit mode. But that would be a way bigger change, where an escape key + focus management might do the trick in the meantime. I'll try to put a PR together since I have to fix this for our site.
Edit: this must have started occurring in the latest version, because I'm not experiencing a keyboard trap with an older one.
only thing really missing, or not mentioned in the documentation.
Scrolling seems to cause the editor to not render code highlights. The code that is scrolled into view is shaded as grey and does not have any highlighting. To be clear, the initial code on page load is highlighted, it's just the code underneath it that does not receive highlighting. I've tested in Firefox, Chrome, and Safari. Upon scrolling, I receive this warning:
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!
My codeflask.css is slightly modified (I removed the -webkit-text-fill-color: transparent; line from .CodeFlask__textarea because it seems to cause text that is scrolled into view to be transparent):
.CodeFlask{
position:relative;
overflow:hidden;
}
.CodeFlask__textarea,
.CodeFlask__pre,
code[class*="language-"],
pre[class*="language-"]{
box-sizing:border-box;
position:absolute;
top:0;
left:0;
width:100%;
padding:1rem !important;
border:none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size:13px;
background:transparent;
white-space:pre-wrap !important;
line-height:1.5em;
word-wrap: break-word;
}
.CodeFlask__textarea{
border:none;
background:transparent;
outline:none;
resize:none;
opacity:0.4;
color:#000;
margin:0;
z-index:1;
height:100%;
-webkit-overflow-scrolling: touch;
tab-size: 4;
}
.CodeFlask__pre{
z-index:2;
pointer-events:none;
overflow-y:auto;
margin:0;
min-height:100%;
margin:0 !important;
background:transparent !important;
}
.CodeFlask__code{
font-size:inherit;
font-family:inherit;
color:inherit;
display:block;
}
.CodeFlask__is-code {
white-space: pre;
}
.CodeFlask__textarea_line-numbers {
width: calc(100% - 3.8em);
margin-left: 3.8em;
padding-left: 0px !important;
}
.CodeFlask__pre_line-numbers {
padding-left: 3.8em !important;
}
Noticed PRs seem to be multiple months old.
Has the maintainer stopped supporting this plugin?
Has it been deprecated in favor of other plugins?
In an older version of CodeFlask, onUpdate
would run on the initial update to the textarea. It's still making the call to runUpdate
, but the initial function scope is wrong so the callback never runs on page load.
If you log this
in runUpdate
on page load it points to window
...where Codeflask won't find this.updateCallBack
later on. Once you type in the textarea, the scope is set to the appropriate object.
This is the part of the code that is wrong: https://github.com/kazzkiq/CodeFlask/blob/master/src/codeflask.js#L295
Fix: Change onUpdate to bind the correct scope
updateCode(newCode) {
// previous code here
setTimeout(this.runUpdate.bind(this), 1);
}
From bower.json
it seems that the project is under the MIT license, but this isn't made particularly clear.
define('ADMIN_EMAIL_TEXT', 'Hi %s,' . "\n\n" . 'Your personal information, perhaps including your password, has been changed. If this was done without your knowledge or consent please contact the administrator immediatly!' . "\n\n" . 'Website : %s' . "\n" . 'Username: %s' . "\n" . 'Password: %s' . "\n\n" . 'Thanks!' . "\n" . '%s' . "\n\n" . 'This is an automated response, please do not reply!');
First off, thanks for making this awesome plugin!
I suggest not requiring JavaScript for basic usage. Lots of people aren't comfortable with it.
Have a codeflask
class that when people use it, these elements are automatically made into editors.
Similarly, default language can just be defined on an ancestor, like <body class="language-css">
: This is just basic Prism.js functionality, you don't even need to implement it yourself :) Just include it in the docs.
Well, when text is selected - it's actually also selected in background textarea. If you're using only text it's not a big problem (but it don't looks clean anyway!), but you have more problems when you're replacing some characters in prism (emoji, for example) - so you get image in foreground and text in background, which both seen on selection and interfere with each other (at least in Chrome, haven't tested in other browser, but I expected it is reproduced there also). Here is screenshot (for text-only case) https://ibb.co/cRFvFo
I understand that CodeFlask is tiny project, but there is no such problem in CodeMirror, which is also using background textarea, so it would be useful if you clarify this thing in documentation if this can't be fixed for some reason, thank you.
By now, only one instance of CodeFlask is available per page. With the new APIs being developed each instance should be retrievable later for bindings and function calls. User should be able to do this kind of stuff:
var flask = new CodeFlask;
var multiFlasks = new CodeFlask;
// Init a single editor
flask.run('#my-editor', { language: 'javascript' });
flask.onUpdate(function(code){
console.log(code);
});
// Init multiple others
multiFlasks.runAll('.all-my-flasks', { language: 'html' });
flask.update('<button>I am a button</button>'); // updates all editors
For this, the architecture of the plugin will have to change a little, possibly breaking how you call CodeFlask.js on your page (yeah, this shouldn't happen).
Ok folks,
So I'm working on a new CodeFlask version, one that is more stable and easier to maintain and use. For this, I've written v1.0
from scratch.
The goal is to make CodeFlask super simple, like a small core which have only one main goal: provide code highlight as you edit your code snippet.
In short, here is the list of features/changes being worked on before releasing v1.0
:
flask.addLanguage()
, etc);translate
instead of margin/top/left
);.runAll()
;I'm also considering dropping cdnjs and adopting unpkg. The cool thing here is that unpkg automatically generate cached files from npm releases. As soon as a new release is pushed, you immediately have CDN updated and ready to go. Way easier to work out.
The v1.0
has no release date yet, but I managed to push a lot of code into it in the last few days, and hope to have something ready in the (really) near future.
Hi,
this project is cool and i want use it. but it does not support RTL language. could you pleas consider adding this feature?
For example : Bi-directional Text Demo
Thanks a lot
It would be great if we can excute the JS code in the field.
Any idea how to go about it?
Something like this:
https://api-notebook.anypoint.mulesoft.com/notebooks/
Hello,
Is this a toy for the user, or something that's just there for aesthetics? Because it seems
impossible to actually use the code inside the editor.
In my use case I have 2 editors that and the code inside needs to be send to the server and processed, how can I achive that with this script, if possible by default.
The css rule white-space:pre-wrap; not work in <pre> tag when prism.css is used
Uncaught ReferenceError: CodeFlask is not defined
Hi,
I followed the readme to test the editor.
But with the line flask.run('#my-code-wrapper');
I obtain one error of n is undefined
With the line flask.run('#my-code-wrapper', { language: 'sql', lineNumbers: true })
, all run normaly.
My testing code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/themes/prism.min.css" async integrity="sha256-N1K43s+8twRa+tzzoF3V8EgssdDiZ6kd9r8Rfgg8kZU=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/line-numbers/prism-line-numbers.min.css" async integrity="sha256-SA3HrKLu4tldegZQVdUx8Cwwo2hQFIu7iW6UOo6OdS4=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/CodeFlask.js/0.1.1/codeflask.min.css" async integrity="sha256-WrayoNKyvtuOAWLPQkI9vvI/ZG8zfJeOrwHiRlFm2BY=" crossorigin="anonymous" />
<style>
.main.container {
padding-top: 50px;
}
#my-code-wrapper {
width:350px;
height:250px;
position:relative; /* Position must be: relative, absolute or fixed */
}
</style>
</head>
<body>
<div class="ui main container">
<div id="my-code-wrapper" data-language="sql"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/prism.min.js" async integrity="sha256-jTGzLAqOAcOL+ALD2f2tvFY7fs6dwkOeo88xiuVHaRk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/plugins/line-numbers/prism-line-numbers.min.js" async integrity="sha256-JfF9MVfGdRUxzT4pecjOZq6B+F5EylLQLwcQNg+6+Qk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/CodeFlask.js/0.1.1/codeflask.min.js" async integrity="sha256-ERpc+wfArI8UJK0iigJWqNNoZETrxAOF8dMjDSCcOTQ=" crossorigin="anonymous"></script>
<script>
var flask = new CodeFlask;
flask.run('#my-code-wrapper');
//flask.run('#my-code-wrapper', { language: 'sql', lineNumbers: true })
</script>
</body>
</html>
I use the Custom Class plugin to namespace the Prism classes, since some of them conflict with my own CSS.
Before 1.0, CodeFlask used the Prism that I provided, meaning everything worked just fine. Now, however, CodeFlask uses its own version of Prism, meaning that I no longer can use the plugin, which breaks styling.
I see no way to interface with CodeFlask's version of Prism outside of the language functions. (I see Prism is in the global namespace, confusing me even more as to why it's included with CodeFlask) I would love to see a way to disable CodeFlask's version of Prism and be able to use my own, similar to how it was before 1.0. I can only see more issues in the future because of Prism being included in CodeFlask instead of CodeFlask depending on it.
This may change depending on the load order, but I have to load Prism before CodeFlask so I can add languages to it (#65 related). I suppose that I could maybe load Prism before CodeFlask, change its name to Prism2
, then set CodeFlask's Prism
equal to Prism2
, but that seems like a gigantic hack.
Either way, I shouldn't have to (and by extension shouldn't have to force my users to) load Prism twice ๐ข
The CSS.supports
call in editor.js throws an unrecoverable error in IE11. Lots of people still use IE, and it's a pretty easy change to get it working. I wrapped it in a try...catch
block but there might be a more graceful way to do it.
let COLOR;
try {
COLOR = (CSS.supports('caret-color', '#000')) ? BACKGROUND_COLOR : '#fff';
} catch (e) {
COLOR = '#fff';
}
Make tab indention(and unindent) work when you have multiple lines of text selected.
So if you have three lines selected, each line should be indented when pressing tab
.
Add a keyboard shortcut to unindent(remove a level of indent, spaces or tabs).
Shift + Tab
works well for this and lots of code editors use this keyboard shortcut.
Hi there, thanks for the great library!
I think it would be good if we could pass some options to disable keyup events on the editor. There currently isn't a way to turn off tab indentation or auto closing parentheses via this library and I can't remove the event listener either because it is defined anonymously.
CodeFlask should have a method for exposing the current code inside the editor.
Something like:
const flask = new CodeFlask;
flask.run('#my-editor');
flask.code(); // Retrieve current code in the editor.
Getting error ReferenceError: CSS is not defined
during the mocha tests
I guess it is because this line:
CodeFlask/src/styles/editor.js
Line 4 in e64a308
I've been trying to use codeflask from webpack, and I am getting the following error:
Module not found: Error: Can't resolve 'codeflask'
I discovered this is because inside package.json
, the main
field points to the non-existing index.js
:
"main": "index.js",
I've manually changed it to this, and the import works:
"main": "src/codeflask.js",
It's almost too simple a fix for a PR, but I could create one if desired.
Is there a reason why the last update of the codeflask npm package was 11 months ago? I like to use it in my project as a npm package
Testcase: http://codepen.io/fcicileo/pen/LWrGwE
It appears that when the container has a specific width set via CSS, the code in the <textarea>
and the <pre>
is not aligned anymore.
flask.run(`#code-${this.get('selector')}`, {
language: "javascript",
lineNumbers: true
});
do not add "line-number" class to the corresponding elements.
When writing code, closing parentheses are now added automatically! ๐
However, the behavior is not as expected.
fn main(<caret>
adds the ending paren: fn main(<caret>)
, but if you type )
after it's added, you end up with fn main())
. This is inconsistent with almost every editor that auto-adds ending marks.
Typing fn main()
should result in fn main()<caret>
, not fn main()<caret>)
.
Could you fix bower.json? I can't use prism 1.6.0 because BOWEL want to use 1.0.1 version only:
bower - ECONFLICT Unable to find suitable version for prism
"dependencies": {
"prism": "~1.0.1"
},
I see that line-numbers support is not available in any release yet. Any plans to make a new release with that feature?
Is there any API for disabling the text area of the editor, such that the editor serves as a code viewer on different events?
Hello, is there a possibility you could add support for autoclosing certain characters like brackets and quotes? e.g. when editing a json you can just type one {
and the editor would automatically write a closing }
Thanks for reply and keep up the good work. ;-)
Unsure if there's another issue open for this, but it'd be nice if CodeFlask automatically added the same number of indenting characters (tabs/spaces) based on the previous line when hitting Enter
Steps to reproduce:
function foo() {
// cursor is here: โ
Result:
Expected result:
Hi, It's possible to load code from file using jquery and then run codeflask to edit that code?
Example here: http://plnkr.co/edit/lwy2Zk11UJ8GVWX1JgKD?p=preview
In the example the html code is rendered as HTML...
NS
CodeFlask.js have dependency on Prism.js. I don't know how the dependency policy works on Bower, but we would need to import Prism too.
Related to PullRequest #7 .
Hi,
I'm trying to add PHP language but can't figure out how to do it. I Prism I simply have to add appropriate JS script. Here I have to call function with options. But PHP lang description consists not only of options but also script calls. Any ways to do it here?
https://cdnjs.cloudflare.com/ajax/libs/prism/1.14.0/components/prism-php.js
In the process of updating to 1.0, I realized that I would need to tell CodeFlask how to use all the languages that Prism has, doing something similar to the following:
// load prism.js after codeflask so it doesn't get overwritten
for (var lang of Object.entries(Prism.languages)) {
flask.addLanguage(lang[0], lang[1]);
}
To do this, I need to have already created an editor, but as someone who frequently will have multiple editors on the page (dynamically added, as well), it doesn't really make sense for this to be a function on an editor instance. My first instinct was to call it as CodeFlask.addLanguage()
.
Is there a reason that this is an instance function?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.