Share your repls and programming experiences

← Back to all posts
PIE - Prism integrated editor
h
Lethdev2019 (182)

Views:

About PIE

Edit: Who wants us to add HTML, CSS and JS support next as well as a new dashboard for multiple containers? please write your response in the comments below ;)

When @MarcusWeinberger made his note-taking app that used markdown, I got inspired to create an editor - without using any code editor (Ace, Monaco and Code Mirror) apart from my own. (which uses an editable code block)

That is exactly what PIE is.

Modules

  • Feather Icons.
  • Prism.JS syntax highlighter (supports every language out there).
  • Marked.JS for markdown rendering.

I needed to look at a lot of stack overflow questions to solve the cursor going back to the start when it is highlighted again but I eventually found the right one. (https://stackoverflow.com/questions/4576694/saving-and-restoring-caret-position-for-contenteditable-div)

There are some bugs on it (they are on the "template.")

If you have suggestions to improve this, please do share them.

If you like it, please click the upvote button so I know that I can make more stuff like this.

I really want to add other languages to this - so i am open to those who know how to get a language like python into JS as a console and how know to create a save function.

News Update

I have transferred the repl to my team so we can start working on it, feel free to join.
The repl is now fully open-source here. Feel free to start creating issues and create push requests.

you can now view the repl here.

Commentshotnewtop
Lethdev2019 (182)

I've got a 100 cycle special in the works - A language called Slice to go with PIE. it is a Basic like language, yet mixed with python. that would not be completed on time

sorry guys, it has had to be cancelled due to being 3 away from 100 - it has been going waaay too fast.

I really wanted to get something out. D:

Lethdev2019 (182)

darn, time to reset the counter - it went too fast. but thanks. also, use the equation n = 100 * x^2 + 100 to find when the next one is. @Leroy01010

Lethdev2019 (182)

DUE to the capability of my language (tested with @MarcusWeinberger for the first timed test, he admitted it was "speedy".)
The time to print 100 times in a loop and interpret was the following
0.005470752716064453 +
0.0041654109954833984 +
0.0044820308685302734 +
0.009480714797973633 +
0.008631467819213867

The average being 0.00644607544 seconds

speedy? we think so.
this means that it should be able to print 1000 lines in about 0.06 seconds on average.

Correct, but the fastest was 0.03609776496887207 seconds.

To print 10000 lines, one of the fastest I got was 0.3364229202270508, to show you proof that I am not lying, here is a screenshot.

At 100000 lines, it drops to 5.370692729949951 seconds.
@Leroy01010 @JosephSanthosh

JosephSanthosh (1192)

@Lethdev2019 Jesus Christ Dude! This is insane, nice job!

Lethdev2019 (182)

can you get me the project link.
are you using the insider version? @BobTheTomatoPie

Lethdev2019 (182)

i'll help with the fixing that project. it due to applying custom css.
some bits you should not really touch.
@BobTheTomatoPie

Lethdev2019 (182)

but ehh, we will create --variables so you can just apply it in a css file.

haha adding more to our plate. @BobTheTomatoPie

BobTheTomatoPie (1129)

i dont think im using insider version @Lethdev2019

BobTheTomatoPie (1129)

lmao, i just thought youd be interested @Lethdev2019

Lethdev2019 (182)

ah ok. the insider version runs on node. @BobTheTomatoPie

Lethdev2019 (182)

well, we shall create an easy and recommended way to type the editor.
we will use the following.

theme.css

html{
    --primary-color: #333;
    --secondary-color: #222;
    --secondary-tertiary-color: #222;
    [...]
}

ect.
the other css script will apply the settings.
@BobTheTomatoPie

Lethdev2019 (182)

just to make sure that does not happen. @BobTheTomatoPie

Lethdev2019 (182)

Almost done with containing the css in the insider edition. @BobTheTomatoPie

Lethdev2019 (182)

DONE! try it here --> https://pie-nodejs.foxglovedev.repl.co/
the css should no longer affect the editor.
@BobTheTomatoPie

Lethdev2019 (182)

and now... you cannot break the editor in the insider edition.
We don't even need to clean the css. @BobTheTomatoPie

Lethdev2019 (182)

that is that ticked off the list
@BobTheTomatoPie

Highwayman (1358)

Even if this wasn’t as awesome as it is I still would have upvoted just for the acronym XD

Lethdev2019 (182)

Thanks, it took me a minute. it was going to be "PICE" but it did not fit. @Highwayman

Lethdev2019 (182)

also, "Prism Integrated Editor" analysis here...
"Prism integrated" means that it uses prism.js but "integrated" means it uses that module, but prism.js is not the editor, only the syntax highlighter.

we are going to be doing more stuff with this, like creating a mini repl.it, maybe use it in a blog or two etc. We are continuing to update the editor right now. maybe make it like repl.it's editor. the major difference being is that you won't loses your progress on disconnect.

if we do multiplayer on it, we might introduce a feature which will just merge changes made from every person after they reconnect. Even then, we will make sure the server runs well so that rarely happens. With repl.it, I'd say a disconnection is a feature in it's own right because it is so common. @Highwayman

But what features would you want included in the website that we will make as our group is mainly about the audience, not entirely about ourselves.

uhmansoori (46)

Nice editor. Could do with some polishing but still great.

Lethdev2019 (182)

can you please describe how? @uhmansoori

Lethdev2019 (182)

I can't improve it without knowing what you mean by "polishing" and where. @uhmansoori

uhmansoori (46)

@Lethdev2019 Like you could make the buttons a bit larger, not too much or it might become annoying. Also you could center them so it looks much better, rather than having it on the top-left corner. Other than that it looks just fine.

Lethdev2019 (182)

try this --> https://PIE-Nodejs.foxglovedev.repl.co
this is the NODEJS version that we will make a repl.it like site from.
@uhmansoori

Lethdev2019 (182)

is the nodejs version an improvement? @uhmansoori

Lethdev2019 (182)

it also is literally polished up with backdrop-filter: blur(8px) @uhmansoori

Lethdev2019 (182)

it also supports codeblock syntax highlighting.
edit: well, that'll get fixed @uhmansoori

Lethdev2019 (182)

at least I we (it was "I" but I've got it on the team projects now) are fully open to feedback. @uhmansoori

DynamicSquid (3609)

Oh wow, this is cool! Sweet!

DynamicSquid (3609)

@Lethdev2019 I like when people make things that you make make things with, if that made sense lol. Like making something where you can code, or making a game engine or a physics library or a language or this

DynamicSquid (3609)

@Lethdev2019 or something where other people can use it to create other thing

Lethdev2019 (182)

ah it is going to get more complicated though. eg. getting a user dashboard @DynamicSquid

DynamicSquid (3609)

@Lethdev2019 you're lucky you chose to learn js and web stuff. you can make cool things like this

Lethdev2019 (182)

ah does not stop there, Im learning rust too and I know python. (4 years of coding does this to you. @DynamicSquid

DynamicSquid (3609)

@Lethdev2019 oh cool, all i know is c++ and some processing. can't really make anything interesting with c++ tho, well, you can , but not as interactive as this

Lethdev2019 (182)

yeah, i made sure this was RPI friendly as it does not take up cpu process as you type, only when you want to preview it. @DynamicSquid

Lethdev2019 (182)

a raspberry pi or "Raspberry PI" @DynamicSquid

firefish (559)

Hm... What happened to NPMG? I crashed, and next thing I know I'mm kicked out and all files are gone? Is this a bug in repl?
I'm pretty sure I can revive the code... but what happened exactly?

Lethdev2019 (182)

god knows (literally) i am working on it. something happened and i also got kicked. @firefish

@amasad do you know what is going on? (our repl even just deleted main.py)

firefish (559)

@Lethdev2019 Apparently downloading as zip still keeps the files... I have the source code right here...

Lethdev2019 (182)

@firefish right i have reinstated you to the repl

Smart0ne (19)

When I see PIE, I think of "principle of inclusion and exclusion".

Lethdev2019 (182)

no, please no.

I though I escaped maths this summer
@Smart0ne

AstOwOlfo (213)

mate what are you playing at? u can't type anything... how has nobody pointed it out after 8 days of release. this bug has been here since day 1. 38 upvotes and no indication of anyone acknoledging this...

Lethdev2019 (182)

no one has told me any bugs, apart from @BobTheTomatoPie, please give details of the bug as no issues have been opened in the REPO, nor am I a fortune teller or a physic unless is is about not being able to edit on Firefox or Edge codename "Spartan" as I found that bug this morning. The disability is die to the contenteditable tag not working correctly in some browsers, I am trying to find a solution. @agent9002

Lethdev2019 (182)

In the meanwhile, you must use a chromium based browser like Microsoft Edge 72 and above or Google Chrome as that is a browser-related issue. @agent9002

AstOwOlfo (213)

sorry, my keyboard mustve cut out, yeah its about typing. if you're trying to find a solution, i guess you werent trying hard enough: <input> @Lethdev2019

Lethdev2019 (182)

yeah, you kind of have to sacrifice syntax highlighting for that which makes the name pointless as it uses Prism as a syntax highlighter. @agent9002

AstOwOlfo (213)

if you use js typing events you can still highlight your syntax. @Lethdev2019

Lethdev2019 (182)

prism does not support that. @agent9002

AstOwOlfo (213)

then do it without prism. @Lethdev2019

AstOwOlfo (213)

why is contenteditable set to plaintext-only instead of true? setting it to true makes it work on firefox @Lethdev2019

Lethdev2019 (182)

umm, so you don't paste a picture in. @agent9002

AstOwOlfo (213)

right well if you're not happy with that, then why not change it from <pre> tags to an actual editable <div> ? plain text will work and no images can be pasted @Lethdev2019

Lethdev2019 (182)

that would get rid of line numbers. @agent9002

Lethdev2019 (182)

instead, i am going the JS route @agent9002

Lethdev2019 (182)

well. nope, it is just broken on Firefox. @agent9002

Lethdev2019 (182)

right, for now there will just be a warning saying that you will not be able to edit. @agent9002

AstOwOlfo (213)

that’s not a solution. allow images until you find a proper fix. @Lethdev2019

AstOwOlfo (213)

also it’s not false, i’ve tested it first hand. @Lethdev2019

Lethdev2019 (182)

well, there was but there was issues in Firefox when creating a new line... you could not do that to my annoyance. looked a couple things up and there is a way, but it is REALLY complicated to implement (google docs for you) @agent9002

AstOwOlfo (213)

yes, because you need to use a <div> not <pre> @Lethdev2019

Lethdev2019 (182)

THAT WILL GET RID OF THE LINE NUMBERS. please, note that i am trying not to lose any current features. @agent9002

Lethdev2019 (182)

I may switch to Monaco to fix this. @agent9002

AstOwOlfo (213)

yes, you've already mentioned the line numbers. as far as i'm aware, you should be able to migrate all your pre-existing javascript/css to it, or is there a specific reason it absolutely HAS to be a pre tag? @Lethdev2019

Lethdev2019 (182)

because 1. line numbers will stop working, 2. it'll screw up the css... again. I'll try to make monaco work, but no guarantees. @agent9002

Lethdev2019 (182)

HAHA yes, got Monaco to properly behave using a CDN. @agent9002

Lethdev2019 (182)

right, that'll be in version 2/3, we are all busy so it may take a LONG time but I am constantly working upon it.. @agent9002

AstOwOlfo (213)

alright brilliant, hope this get's sorted ;P @Lethdev2019

Lethdev2019 (182)

well... monaco is a cross browser editor written in js with web workers meaning it should work. @agent9002

Lethdev2019 (182)

I am going to test on firefox. @agent9002

Lethdev2019 (182)

yes it works. https://monaco-test.lethdev2019.repl.co/. please note that it is set in JS mode. @agent9002

Lethdev2019 (182)

it'll require a redesign on the functions ¯\(ツ)/¯@agent9002

Lethdev2019 (182)

and some reading (in the documentation) @agent9002

AstOwOlfo (213)

well it'll be worth it to support some of the most popular browsers ;P @Lethdev2019

Lethdev2019 (182)

I'll admit, that is most definitely true @agent9002

Lethdev2019 (182)

after reading some more of the docs, i set it to vsdark @agent9002

Lethdev2019 (182)

can i ask you to just quickly review this version (3.00.003) https://PIE-v3.foxglovedev.repl.co
i am still working upon it. @agent9002

AstOwOlfo (213)

yep, it's looking good. feels nice to type with so far. @Lethdev2019

Lethdev2019 (182)

the light bar in the middle is resizable, i'll be dealing with that soon. @agent9002

Lethdev2019 (182)

I added the white bar to show it is draggable @agent9002

Lethdev2019 (182)

at least it is an improvement, stack overflow is more useful than the docs for some reason. @agent9002

Lethdev2019 (182)

right, i added a demo for the save icon on it. https://PIE-v3.foxglovedev.repl.co, just type and you'll see the effects @agent9002

Lethdev2019 (182)

Are you joining now? it is 7:00pm on my end.
Or we can talk tomorrow. @Codeteacher

Codeteacher (36)

Sorry I can't join today, but I can tommorow @Lethdev2019

Lethdev2019 (182)

i may not be online today, we'll try tomorrow. @Codeteacher

Lethdev2019 (182)

right, i'll be available today. @Codeteacher

Codeteacher (36)

I'll join in a hour, I am eating my lunch @Lethdev2019

Lethdev2019 (182)

oh, may not be up, it is 8:22pm here. @Codeteacher

Lethdev2019 (182)

yes, i am in the pie 3 repl. @Codeteacher

Lethdev2019 (182)

I am ready (let's try again), when you join, just type hi and I'll get a notification. @Codeteacher

viraatvv (145)

wow i really need to make stuff like this in one day

sugarfi (524)

I would recommend setting #codearea { cursor: text; }.

Lethdev2019 (182)

@sugarfi try here - https://PIE-Nodejs.foxglovedev.repl.co
we fixed a bunch of stuff in this preview of 2.00.002.

Lethdev2019 (182)

hahaha, i'll get a language dine soon called Slice. So yes you'll be able to soon.
you can fork this project on github (https://github.com/Poly-Development/PIE-Nodejs) and run it on replit. I made sure to make it as simple as possible to run. @AnthonyValdes

@aguy11, I saw you subscribed to the OLD PIE repo. the new one is here https://github.com/Poly-Development/PIE-Nodejs

ridark (91)

btw you can get rid of all of it, but after you have to press CTRL + A then select where the cursor is to be able to edit it again. @Lethdev2019

Lethdev2019 (182)

thanks, ALSO you can press CTRL+A, delete and start typing again without reselecting - i checked. @Programmer567

Wumi4 (94)

Can you make a Tutorial post about how you setup Prism.js for your editor, I have made a live code editor and want to use Prism.js for syntax highlights, but I dunno how to install and setup it. :(((((((

Lethdev2019 (182)

oh, well, you will be able to just download and run the editor, i am making a readme for that. But sure. @DangHoang2

Lethdev2019 (182)

@DangHoang2 I am creating one... using the PIE editor before adding it to repl.it

Lethdev2019 (182)

It is the first time I have done a tutorial so it may not be great. but it is done @DangHoang2

Coder100 (8709)

might want to turn off autocomplete lmao

Lethdev2019 (182)

Lesson learned... use an iframe. @BobTheTomatoPie

BobTheTomatoPie (1129)

using *{} will effect the whole document

Lethdev2019 (182)

i know, i used it to get rid of the focus border. @BobTheTomatoPie

Leroy01010 (369)

Edit: Who wants us to add HTML, CSS and JS support next as well as a new dashboard for multiple containers? please write your response in the comments

@Lethdev2019

Lethdev2019 (182)

oh ok! :) we have got the system to do it btw, you can say thanks to @BobTheTomatoPie for a bug which made us use an iframe. @Leroy01010

BobTheTomatoPie (1129)

oh lmao I had no idea that screenshot helped, well awesome dude! @Lethdev2019

Lethdev2019 (182)

btw, when you send a screenshot, you don't ever need to suggest what you think causes the bug unless it is really unclear, but i tend to figure out quickly (for example, the css bug) @BobTheTomatoPie

Lethdev2019 (182)

your message did not send twice. @BobTheTomatoPie

MarblesAndMore (54)

This is actually brilliant in my opinion!

Lethdev2019 (182)

ok, but can i ask if you could tell be a feature that you would want in the next version? (you can preview it here - https://PIE-Nodejs.foxglovedev.repl.co)
we are planning folders currently (and maybe multiplayer with a chat). @MarblesAndMore

MarblesAndMore (54)

@Lethdev2019 Maybe a way to add pictures?

Lethdev2019 (182)

oh, dropzone.js should do the trick for that. @MarblesAndMore

BobTheTomatoPie (1129)

Does the javascript part work? I wrote a simple script of adding an event listener to a click to change the color of some text and it did not work

Lethdev2019 (182)

yes, i have light and dark theme on it. you need to change the href value in the <link> tag. you also must not use both light and dark css files at once, you can view a tutorial here - https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/. @BobTheTomatoPie

BobTheTomatoPie (1129)

That's not what I meant at all, the javascript does not run in your editor, I wrote a script in the script tag in your editor, I never said anything about color themes, if it's a real HTML, css, js editor you need to allow the js to run @Lethdev2019

Lethdev2019 (182)

that is strange... I am using the same provider as @MarcusWeinberger so I don't know what is going on there. it seems that the JS script tags work, but not what is inside of it.
It supports full html so I think it is a bug in markup.js.

Lethdev2019 (182)

thanks for letting me know so we can try and fix it in version 2.00.013 :) @BobTheTomatoPie

Lethdev2019 (182)

also, it is markdown right now, but we will add support for html css and js later. @BobTheTomatoPie

BobTheTomatoPie (1129)

awesome dude let me know when @Lethdev2019

BobTheTomatoPie (1129)

oh, html and css seem to work fine tho @Lethdev2019

Lethdev2019 (182)

yeah, that is why I am concerned. @BobTheTomatoPie

Lethdev2019 (182)

Ok, the bug has now been documented in the project. @BobTheTomatoPie

BobTheTomatoPie (1129)

I think it is the switch text to HTML effect, you can make an ide in one line of code if you don't mind no js working. @Lethdev2019

Lethdev2019 (182)

well, we want it to fully work. We also will add a "share" page, autosaves, user accounts and a dashboard (forgot the notebooks too which will use markdown) @BobTheTomatoPie

edit: forgot folders and possibly multiplayer.

Lethdev2019 (182)

@BobTheTomatoPie
i currently have the following features down.

  • HTML, CSS and JS editor
  • Dashboard containing:
    • Notebooks
    • Containers (where programmers do programming)
  • Settings
  • drag and drop insert images directly into the file
  • folders to allow more complicated, multi-page projects
  • login page
  • sharing page for people to share thier projects

and the following bug (or bugs):

  • JS does not run in markdown editor but HTML and CSS does.
BobTheTomatoPie (1129)

Nice dude hope you get it all checked off @Lethdev2019

Lethdev2019 (182)

Thanks! :) @sugarfi @ZDev1
based upon all the likes, I can do projects like this again.

Lethdev2019 (182)

@ZDev1 well, I want to listen to feedback as it makes people feel like that they are not unimportant, business strategies for you.

ZDev1 (653)

@Lethdev2019 well umm...
I made a blog page using nodejs
here is it
can you make a social page or a blog page?
it is a really good idea!

Lethdev2019 (182)

I can put you on the team as we are planning to create something along the lines of repl.it and codepen.io so it will have a "share" area. @ZDev1

Lethdev2019 (182)

@ZDev1 you have been added to the team. You can go to "PIE Nodejs"

MarcusWeinberger (585)

I love how the main page is the default and that you can edit it

Lethdev2019 (182)

warning joke alert
I think i'll do some more of it... tomorrow. @MarcusWeinberger

Lethdev2019 (182)

I love how the main page is the default and that you can edit it

i could go further

if i really want to, i could make my websites editable. You know, edit a text there and here (Bicycle -> Tricycle) in a <p> element.
change the header, that stuff without ever touching a code editor on the client end.
@MarcusWeinberger

MarcusWeinberger (585)

@Lethdev2019 What do you mean when you say that,

without ever touching a code editor on the client end

I'm not sure I follow

Lethdev2019 (182)

ok, think of a webpage, now think that you can just click an element and edit it. that is what i mean, i can do that. it is how the editor works, it is an editable div element. @MarcusWeinberger

MarcusWeinberger (585)

This is very neat! I love it!

Lethdev2019 (182)

@ironblockhd @JosephSanthosh
there is a new update - my team might start working upon it.
You can also clone it and create pushes to my repo for improvements. (it is on Github.)
:)

JosephSanthosh (1192)

@Lethdev2019 Thx I really appreciate the offer but I'm really busy. Sry and good job

Lethdev2019 (182)

The repl link has been updated.

JosephSanthosh (1192)

WOW! THIS IS REALLY COOL Good Job dude

Lethdev2019 (182)

it took me 2 days, none-stop. Including finding the best syntax highlighter (Prism.js as it pretty much supports every single language on planet earth.) @JosephSanthosh

Lethdev2019 (182)

also do you like the dark theme? @JosephSanthosh

JosephSanthosh (1192)

@Lethdev2019 Its wonderful, you really deserve more credit for this. Sorry i'm not good at .js languages.

Lethdev2019 (182)

well, does not mean you can't give feedback. @JosephSanthosh

Lethdev2019 (182)

well, I am thinking of trying to find Insiders (alpha testers) for when this project gets really complicated. @JosephSanthosh