Discuss Scratch
- Discussion Forums
- » Advanced Topics
- » A Word Processor Written in JavaScript
- ninjaMAR
- Scratcher
1000+ posts
A Word Processor Written in JavaScript
I've built a word processor. It doesn't use document.execCommand, which is deprecated. I've built a replacement from the ground up. Here is the link to the site, and to the source code.. BTW this project is incomplete.
Simply select some text, and the context menu will pop up to change styling.
How to use it
Simply select some text, and the context menu will pop up to change styling.
Problems? Make an issue on GitHub
Want to contribute? Make a pull request on GitHub
Last edited by ninjaMAR (April 30, 2024 10:56:43)
- ajskateboarder
- Scratcher
1000+ posts
A Word Processor Written in JavaScript
Imports are supported with scripts set to type=“module” What's being used for build and module handling?
(I see the ‘import’ keyword being used and a .build file)
I like it – quite minimal. Would also be nice to have Markdown shorthands for stuff like headers (type in “# a” and get an h1 with “a”)
- ninjaMAR
- Scratcher
1000+ posts
A Word Processor Written in JavaScript
(#2)ES6 for modules
What's being used for build and module handling?
(I see the ‘import’ keyword being used and a .build file)
I used a custom build script. It basically builds my whole website (using jinja templates) to a folder called dist. It then copies over static files. It also pulls submodules (editor) and moves them to a location inside dist specified by the .build file. This is also why the editor uses relative imports.
- ninjaMAR
- Scratcher
1000+ posts
A Word Processor Written in JavaScript
(#3)I'll think about it. If you want, you could make an issue on githubImports are supported with scripts set to type=“module” What's being used for build and module handling?
(I see the ‘import’ keyword being used and a .build file)
I like it – quite minimal. Would also be nice to have Markdown shorthands for stuff like headers (type in “# a” and get an h1 with “a”)
- AHypnoman
- Scratcher
1000+ posts
A Word Processor Written in JavaScript
It's a nice editor, particularly given most text editors overload you with features. An export to HTML button would be a nice addition.
~ AHypnoman (Use Shift+Down Arrow to see the rest of my signature)
I am an evil kumquat, and your siggy looks tasty…
Hello there, I'm AHypnoman, If you write my name remember to capitalize the “H”. “When you don't create things, you become defined by your tastes rather than ability. your tastes only narrow & exclude people. so create.” I write though as tho.
According to the Chrome Console, my viewbox attribute is “Garbage”. Very nice, Chrome.
#TrendyHashtag
Gib internneeet
- ninjaMAR
- Scratcher
1000+ posts
A Word Processor Written in JavaScript
(#8)I don't really know how I would incorporate this into the UI, since it is very minimal. The editor uses contenteditable, so the innerHTML of the editor can be used to export it.
It's a nice editor, particularly given most text editors overload you with features. An export to HTML button would be a nice addition.
- ninjaMAR
- Scratcher
1000+ posts
A Word Processor Written in JavaScript
(#10)Currently, the editor is loaded in index.html. src/editor contains the editor files. If you need to modify the editor toolbar, modify src/editor/editor.js and src/editor/editor.css
I'm developing some contributions and am unsure if I should be editing index.html or full.html
editor.css gets loaded dynamically
toolbar gets loaded
- MagicCrayon9342
- Scratcher
1000+ posts
A Word Processor Written in JavaScript
preferences + dark mode(#10)What contributions are you making?
I'm developing some contributions and am unsure if I should be editing index.html or full.html
- ninjaMAR
- Scratcher
1000+ posts
A Word Processor Written in JavaScript
Okpreferences + dark mode What contributions are you making?
- BwnnyRxbbit
- Scratcher
100+ posts
A Word Processor Written in JavaScript
I'd love to add a button that copies the HTML but I'm unsure where I should add this code to. I can't find a file that was the main code such as the nabber/buttons ext.
Last edited by BwnnyRxbbit (April 20, 2024 04:00:29)
Meow
- ninjaMAR
- Scratcher
1000+ posts
A Word Processor Written in JavaScript
(#17)index.html -> ui
I'd love to add a button that copies the HTML but I'm unsure where I should add this code to. I can't find a file that was the main code such as the nabber/buttons ext.
src/index.css -> styling for ui
src/index.js -> load the editor, and auto update the live preview
I guess you would need to modify index.html to add the button
- dynamicsofscratch
- Scratcher
1000+ posts
A Word Processor Written in JavaScript
nice editor! might end up using.
aII toasters toast toast, but what happens when there are no longer toasters being produced? will their technology simply become obsolete, with humans moving onto bigger, better things? will toast become a distant memory, written in textbooks of the future as foods us simpler generations ate? who's to say! society is constantly moving, changing, evolving, ideas being built upon, improved upon, theories being proven or disproven. are we but a blip on the timeline? sure, our names may not be remembered, but that's not the point. you can make a change. you can make a difference. you can make the world better, even if you don't know yet. and the first step is to go for it. even if you are afraid of failure. going back to the example of toasters, do you know off the top of your head who invented them? no? have you used one? probably. so, even if you don't remember my name, if I was able to help awnser your question, that is enough. if I was able to help you, even in the slightest way, this could push you to continue with scratch and not give up after the program crashes, and maybe one day learn other programming languages and change the world. everything is a cause and effect reaction, new inventions lead to the technology of the future, and even as the generations of the past are slowly forgotten, their influence lives on to this day, affecting how the world eventually turned out and how it will be for generations to come.
and, without toasters, we wouldn't have toast.
and, without toasters, we wouldn't have toast.
Regards
dynamicsofscratch
Anything above that grey line is a signature!
Also, anything can be put in your signature, (also referred as a siggy) including ads but! You cannot do anything else that violates the community guidelines as, you will be reported and you could be banned/muted.
Computer enthusiast, coder, designer and a offline veteran.
700th post
- BwnnyRxbbit
- Scratcher
100+ posts
A Word Processor Written in JavaScript
That's not what I meant, however the problem is solved.(#17)index.html -> ui
I'd love to add a button that copies the HTML but I'm unsure where I should add this code to. I can't find a file that was the main code such as the nabber/buttons ext.
src/index.css -> styling for ui
src/index.js -> load the editor, and auto update the live preview
I guess you would need to modify index.html to add the button
Meow
- Discussion Forums
- » Advanced Topics
- » A Word Processor Written in JavaScript