markhillard / editor Goto Github PK

View Code? Open in Web Editor NEW

202.0 202.0 49.0 4.28 MB

:pencil: Real-time, responsive HTML/CSS/JS code editor

Home Page: https://markhillard.github.io/Editor

License: MIT License

JavaScript 45.00% HTML 22.35% CSS 32.65%

editor's People

Contributors

Stargazers

Watchers

editor's Issues

Console support?

Is your feature request related to a problem? Please describe.
I would like to debug the errors and check the outputs while I am coding.

Describe the solution you'd like
A panel where it is possible for the user to show/hide Console outputs.

Describe alternatives you've considered
As long as I get the Console outputs I am enjoyed :)

Additional context
Add any other context or screenshots about the feature request here.
Developer Console output so I can see console.log('This is my output'); in a panel or view somewhere .

And last but not least thanks for a such a great standalone live code editor!
Best regards Zilveer

Preview doesn't work

I tested the downloaded file and the preview doesn't work

Doesn't work with jQuery codes.

Describe the bug
Copy and paste the jQuery codes (https://jqueryui.com/draggable/) for a show case about draggable.

I can see the image, but can't drag it.

To Reproduce

code for test:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
 
 
</body>
</html>

Expected behavior
Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

Screenshots

Desktop (please complete the following information):

OS: macbook
Browser: Google chrome
Version [e.g. 22]

updates

Test with other jQuery sample codes, no one works
https://jqueryui.com/

emmet plugin interfering with sublime keymap

This probably has to do with Emmet's keymap overriding the Sublime keymap. Need to look into this.

increase/decrease editor font size

Create buttons that can increase/decrease font-size and save setting in local storage.

Describe the bug
Not really a 'bug' but I can't get it to work. (I am using it locally.) In the left panel, 'HTML' is highlighted. I type in text and nothing appears in the right panel. I try to switch to CSS or JS and it stays on 'HTML'. The 'tools' doesn't drop down.

What am I doing wrong?

Save local storage settings for editor toggles

The following editor toggles need to be saved using local storage:

wrap
emmet
lint
watch

code pane action buttons overflow in Chrome

It appears that the code pane resize bars are slightly too small in Chrome.

HTML code preview is not showed correctly

When I input '

Hello

' in html code pane without css code, in the preview pane, it just shows Hello, but not h1 font.

mobile support?

If I add support for mobile devices, I'll need to...

~~Destroy/toggle jQuery UI Resizable on page load and/or window resize events~~
~~Trim action button text (only show icons). These will move to the bottom of the window in another action bar~~
Create toggle button for "tools" menu (action buttons)
Create toggle button for preview pane (in addition to code pane toggles) that opens a "views" menu
Clicking on run will auto-show the preview pane
Should I remove the toggle button for Emmet (no tab key on mobile)? NO

Feature: Download Option

Awesome project you've got here!

Would be neat if there were an option to download the code, either in ZIP format with html/css/js files or possibly concat all into a single file...

No clue how to implement this, so afraid I can't help, but figured I'd run the suggestion by you : )

Cheers!

code pane swapping tabs not working in Chrome

Possible fix:

.code-pane-* {
position:absolute;
visibility:hidden;
}

keyboard shortcuts

Should I implement keyboard shortcuts for primary action buttons?

Notes

Don't interfere with existing Default/Sublime/Emmet shortcuts
Build "help" area with list of shortcuts (print out CodeMirror.keyMap object)

Available Shortcuts

Ctrl + S: Save (check for iframe focus - reference)
Ctrl + F: Find (not sure if I'll add search/replace functionality)

resizing CSS code pane past bottom edge causes HTML pane to resize

This is a cosmetic issue, but I need to figure out a better way to auto-resize code panes.

Please add user system, database and admin panel

vertical scroll bars are broken in Chrome

Vertical scroll bars are not shown on page load and scrolling is locked. Re-sizing code panes does not seem to refresh them either.

Horizontal scroll bars work fine.

typeahead search results are limited

When searching for a library from https://api.cdnjs.com/libraries using the typeahead search field, the results are prioritized alphabetically. This causes libraries that have dash characters (and possibly other special characters) in their names to be listed first. The search algorithm will need to be modified.

This is an issue especially when searching for libraries that have many subsets of JS files. For example, if you want the main jQuery library, you can't get/load it because all the other libraries that start with "jquery-" are shown first, so you never end up seeing just "jquery".

Also, I need to consider showing more results and setting a maximum height on the results list so it will overflow automatically with a scroll bar.

Toggle auto-update functionality

Every action in the editor windows causes the preview window to refresh, which can be annoying when writing larger chunks of code. The ability to turn this on/off would be useful and you can still use the "run" button to manually refresh the preview window.

load jquery button and functionality

Need to create a button in the HTML code pane that loads the latest stable version of jQuery.

Preview isn't the same on a Codepen example

Describe the bug
The codepen example found at https://codepen.io/mjgartendev/pen/zQOLqW doesn't look and behave as it should in your Editor, and I have tried to make it work on your editor but it just doesn't work and I wonder why ?

To Reproduce
Steps to reproduce the behavior:

Go to '...' https://codepen.io/mjgartendev/pen/zQOLqW
Copy HTML /CSS /JS code to the editor
Copy also the HTML meta and the rest of the code shown in the pen settings for the HTML part. Paste to the first line in the Editor HTML part
See the preview , it doesn't work

Expected behavior
Preview on Codepen and Editor isn't the same.

Screenshots
Will add tomorrow

Desktop (please complete the following information):

OS: win7
Browser: Chrome (latest) and FF (latest)?

Additional context
A fix for this or to understand why it doesn't work would be appreciated.

js firing outside of iframe scope

When clicking on the run button in the "JS" code pane, scripts are not added in the iframe's HTML markup. Instead, it's running scripts in the parent document (the page itself).

markhillard / editor Goto Github PK

editor's People

Contributors

Stargazers

Watchers

Forkers

editor's Issues

updates

Hello

Recommend Projects

Recommend Topics

Recommend Org