A Word Processor Written in JavaScript

ninjaMAR

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.

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)

ninjamar.dev
Cloud lists

MagicCrayon9342

What's being used for build and module handling?

(I see the ‘import’ keyword being used and a .build file)

Last edited by MagicCrayon9342 (April 8, 2024 02:03:24)

ajskateboarder

MagicCrayon9342 wrote:
What's being used for build and module handling?

(I see the ‘import’ keyword being used and a .build file)

Imports are supported with scripts set to type=“module”

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

MagicCrayon9342 wrote:
(#2)
What's being used for build and module handling?

(I see the ‘import’ keyword being used and a .build file)

ES6 for modules
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.dev
Cloud lists

ninjaMAR

ajskateboarder wrote:
(#3)
MagicCrayon9342 wrote:
What's being used for build and module handling?

(I see the ‘import’ keyword being used and a .build file)
Imports are supported with scripts set to type=“module”

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”)

I'll think about it. If you want, you could make an issue on github

ninjamar.dev
Cloud lists

ninjaMAR

bump

ninjamar.dev
Cloud lists

ninjaMAR

bump

ninjamar.dev
Cloud lists

AHypnoman

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)

Go use Linear Scratch, a port of BrainF that makes programming easier!

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

Play Retorquebit!

Go see my most recent animation!

ninjaMAR

AHypnoman wrote:
(#8)
It's a nice editor, particularly given most text editors overload you with features. An export to HTML button would be a nice addition.

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.

ninjamar.dev
Cloud lists

MagicCrayon9342

I'm developing some contributions and am unsure if I should be editing index.html or full.html

ninjaMAR

MagicCrayon9342 wrote:
(#10)
I'm developing some contributions and am unsure if I should be editing index.html or full.html

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

editor.css gets loaded dynamically
toolbar gets loaded

ninjamar.dev
Cloud lists

ninjaMAR

bump

ninjamar.dev
Cloud lists

ninjaMAR

bump

ninjamar.dev
Cloud lists

ninjaMAR

MagicCrayon9342 wrote:
(#10)
I'm developing some contributions and am unsure if I should be editing index.html or full.html

What contributions are you making?

ninjamar.dev
Cloud lists

MagicCrayon9342

ninjaMAR wrote:
MagicCrayon9342 wrote:
(#10)
I'm developing some contributions and am unsure if I should be editing index.html or full.html
What contributions are you making?

preferences + dark mode

ninjaMAR

MagicCrayon9342 wrote:
ninjaMAR wrote:
What contributions are you making?
preferences + dark mode

Ok

ninjamar.dev
Cloud lists

BwnnyRxbbit

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

BwnnyRxbbit wrote:
(#17)
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.

index.html -> ui
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

ninjamar.dev
Cloud lists

dynamicsofscratch

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.

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

ninjaMAR wrote:
BwnnyRxbbit wrote:
(#17)
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.
index.html -> ui
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

That's not what I meant, however the problem is solved.

Meow

Discuss Scratch