[HN Gopher] HTML Notepad - HTML WYSIWYG editor
___________________________________________________________________
HTML Notepad - HTML WYSIWYG editor
Author : Tomte
Score : 166 points
Date : 2021-05-16 15:04 UTC (7 hours ago)
(HTM) web link (html-notepad.com)
(TXT) w3m dump (html-notepad.com)
| mingodad wrote:
| I understand that this project is to showcase Sciter SDK
| (https://sciter.com) a nice project.
|
| Here I'm showing something I did some time ago
| https://meimporta.eu/htmleditor/ it's a crude WYSIWYG html editor
| for people that already knows HTML/CSS and uses basically the
| browser contenteditable capabilities. It was inpired by Webflow
| (https://webflow.com/) but very simple and basic, it has 4 main
| sections: editor shortcuts, wysiwyg editor, html editor, tree
| view. Some things are easy done in the wysiwyg editor but
| sometimes the raw html editor is better, we can edit in both of
| then and get instant result.
|
| Don't bother comment on the UI/UX it's an personal naive tool
| straight to the point I needed. Anyway any feedback to improve is
| welcome.
| brabel wrote:
| Looks like JavaFX native HtmlEditor:
| https://docs.oracle.com/javafx/2/ui_controls/editor.htm
| c-smile wrote:
| Just in case, there is a screenshot there:
|
| https://docs.oracle.com/javafx/2/ui_controls/img/editor-get-...
|
| it shows <font class="Apple-span-style">, this means the text
| was pasted from a WebKit browser (or that editor is WebKit
| itself).
|
| Ideally such (as MS Office one) garbage shall be removed while
| pasting.
| thisisauserid wrote:
| I wish html-notepad.com had an html notepad.
| john-aj wrote:
| Thank you for developing a modern WYSIWYG/M HTML editor! It is
| definitely a gap in the marketplace.
| Jakobeha wrote:
| This is a very pretty application, and very fast. It reminds me
| of older text editors.
|
| However right now it's very buggy. I used it for 5min and
| encountered bug after bug. Even [?]Q types in "q" and beeps
| instead of quitting the app.
|
| Also, I suggest you use markdown shortcuts (e.g. typing # will
| create a header, *text* will make your text italic, etc.) I'm
| used to them in most text editors and they make editing super
| easy and fast. Of course keep the content WYSIWYG, just markdown
| shortcuts, and you can add an option to turn them off in case
| someone doesn't like them.
|
| Overall though I hope you keep working on this and iron out the
| bugs, because otherwise it's a great app.
| Budabellly wrote:
| This is pretty cool!
|
| > With modern CSS, WYSIWYG Web design is simply impossible. Web
| pages are crafted manually by editing CSS, that is by nature of
| CSS.
|
| mmm.page[1] would like a word with you!
|
| [1] https://news.ycombinator.com/item?id=27128424
| toomanyducks wrote:
| motherfucking website[1] would like a word with modern CSS
|
| [1] https://motherfuckingwebsite.com/
| cod3rboy wrote:
| One use case would be to integrate it blog sites for adding blog
| content (with markdown). But I don't know whether it supports
| this integration or not.
| c-smile wrote:
| Technically possible but practically having source of the
| document available (html or markdown) is enough for most cases
| for copy-pasting to destination. Otherwise passwords to web
| sites / blogs need to be stored outside of browser, all that...
| canada_dry wrote:
| +1 It looks like the result of a collaboration between a good
| designer and a good programmer. The app is intuitive and the
| homepage is well designed too.
| c-smile wrote:
| Thanks for the compliment :)
|
| I did it by myself. It is not that I am good designer even that
| I have artistic education (oil painting) but my primary is MS
| in Applied Physics/Maths (the combination specific for GUI/UX
| developers I think).
| thrdbndndn wrote:
| Bugs I found so far (Windows):
|
| 1. the markdown source button does nothing. I have no idea what
| it's supposed to do, but I didn't see any effect whatsoever.
|
| 2. If you type * or h1 etc. then space, it will automatically
| convert to list/heading etc. However, this doesn't work in the
| first line.
|
| 3. In the `pre` block, when you press enter the cursor doesn't
| move to the next line. But if you type something then, you will
| find it will start on the next line. Probably some CRLF
| shenanigans going on but it's definitely not what the user would
| expect for a WYSIWYG editor.
| c-smile wrote:
| Please use recent one at: https://github.com/c-smile/sciter-
| sdk/tree/master/bin.win/x3...
|
| You just need notepad.exe + sciter.dll in the same folder.
| baby wrote:
| If it can support css grids and flexbox that would be amazing.
| c-smile wrote:
| It does support CSS grids and flexes but in Sciter variant:
| https://terrainformatica.com/2018/12/11/10-years-of-flexboxi...
| rayrag wrote:
| Looks really cool. I tried to add some CSS (inline/local/from
| CDN) but it didn't work. If it worked I would use it instead
| Notion to make some nice looking notes. Some feedback - would be
| nice to have shortcut to source. Portable version have
| unnecessary folders (sciter\sciter\sdk\bin\32\files). When I have
| one note (tilted 'new') opened the title is written vertically
| as:
|
| N
|
| E
|
| W
|
| If I change title or create another note then it's written
| horizontally.
| c-smile wrote:
| It deliberately clears all inline CSS data. CSS should be
| applied at the document host side.
|
| Treat it as pure markdown editor that edits content in WYSIWYG
| form.
| rayrag wrote:
| The CSS still works in the browser so it isn't cleared just
| ignored. This is enough for me, I could use something like
| Parcel or Vite to observe folder with notes to reload changes
| in browser. This way (HTML Notepad + live reload) I can
| combine WYSWYIG + inline CSS to create good looking single
| page notes and replace Notion in some cases (it's slow and I
| don't own files as they are in cloud).
| Johnyma22 wrote:
| You might also like Etherpad :) https://etherpad.org although
| Etherpad doesn't natively support tables and some other features
| this has they are optionally installed as plugins.
| slver wrote:
| I wish we had a WYSIWYG focused on extremely explicit whitelist
| of nodes and attributes permitted, and in what configuration (you
| can put X in Y, but not Y in X).
| c-smile wrote:
| It's kind of doing that already.
|
| Also HTML that is pasted from external sources (browsers, MS
| Office, etc.) gets "cannibalized" on pasting:
|
| https://github.com/c-smile/sciter-sdk/blob/master/notepad/re...
|
| with white listed tags and attributes.
| codingdave wrote:
| CKEditor allows that level of customization. I think TinyMCE
| may as well. You also can massage your data as it comes in and
| out of the editor. I have a React wrapper for our editor that
| walks an HTML tree, and if nodes match criteria I've coded, I
| act on them in various ways before loading it all into the
| editor.
|
| The point being that there is no lack of options for building
| out such features. I'm not sure you'll ever get an editor to do
| it out-of-the-box, though, because everyone's needs are going
| to be different.
| c-smile wrote:
| CKEditor is good but problem is that browser does not provide
| needed APIs for implementing good WYSIWYG solution.
|
| For example in Sciter I've added transactional DOM mutations
| feature
| element.richtext.update(function(ctx) {
| ctx.setAttribute(...) ctx.removeNode(...)
| ctx.wrapNode(...) });
|
| Such mutation is performed as single UNDOable operation.
|
| Also Sciter supports immediate mode painting a la ImGUI that
| helps a lot to make lightweight editing solutions.
|
| The lack of needed API forced Google Docs to switch to Canvas
| based rendering and editing :
| https://workspaceupdates.googleblog.com/2021/05/Google-
| Docs-...
| skrebbel wrote:
| If JS is ok, ProseMirror is designed to let you build exactly
| stuff like that.
| crazygringo wrote:
| This looks really nice and elegant.
|
| It feels a lot like the built-in WordPad that comes with Windows,
| or TextEdit that comes with Macs, in that they both support
| similar basic formatting but are also both historically built on
| RTF rather than HTML.
|
| I'll admit I don't really understand the intended audience for
| this, however. Since it's not for webpages, it seems to be aiming
| at more basic text editing.
|
| But hasn't Markdown pretty much become the de facto standard for
| that? For text documents, why would you ever want to write and
| edit in HTML directly, rather than easier-to-use Markdown that
| can be converted to HTML on the fly? (Especially with WYSIWYG
| Markdown editors existing.)
|
| Just curious what I'm missing here.
| c-smile wrote:
| The intention was to have exactly Notepad but for structured
| HTML.
|
| Latest version: https://github.com/c-smile/sciter-
| sdk/tree/master/bin.win/x3... , two files from there:
| notepad.exe and sciter.dll
|
| It does support editing as in WYSIWIG as in Markdown form.
|
| Actually markdown is also form of WYSIWYG. But WYSIWYG on
| steroids I would say. Markdown format was explicitly designed
| to emulate WYSIWYG but in plaintext.
| ijidak wrote:
| This is great for content writers.
|
| For most article writing, the markdown workflow is inferior to
| using even a basic word processor.
|
| Often, when I write, I want to see the structure of the
| document visually.
|
| Markdown doesn't allow that.
|
| Also, I'm always writing for the web.
|
| I don't need the extra markdown to HTML step. What does that
| buy me?
|
| I think this aspect of HTML Wysiwyg is somewhat overlooked.
|
| Is this the next Hemingway app? Probably not.
|
| But for many of us, who write a lot of content intended for the
| web, this is a great tool to add to the toolbox.
| madsbuch wrote:
| What you find futile I find the strength of the Markdown
| workflow: I really like the separation of writing and layout.
| c-smile wrote:
| Unfortunately Markdown is too limited even for basic tasks.
|
| I wanted to write documentation in Markdown, it should be
| perfectly suitable for that, right?
|
| But this construct for example: <section>
| <header>method ABC</header> <p>Arguments</p>
| <dl><dt>...</dt><dd></dd> ...</dl>
| </section>
|
| has no Markdown representation at all.
| enriquto wrote:
| this html is a bit "outdated", isn't it?
|
| in html5 you would ommit the unnecessary closing tags for
| p, dt and dd.
| madsbuch wrote:
| I am not sure why this is a basic task?
|
| One could call documentation a very specific domain for
| writing and perhaps Markdown is not ideal for that?
|
| Personally I use it to write letters, notes, blog
| articles, and such. When I need to write something more
| complex I might or might not use markdown while embedding
| some other language. Eg. my thesis is written in Markdown
| but uses Latex.
|
| Depending on the context you can indeed use the concrete
| code you wrote as Markdown. You could insist on embedding
| the the <section> pieces into a Markdown document and use
| a markdown to HTML preprocessor.
|
| But you are the judge on whether this is a good idea.
| c-smile wrote:
| You just highlighted problems of Markdown.
|
| HTML supports wide range of applications. Even basic HTML
| provided more semantic value. You can use it as for
| articles as for structured documentation. As it supports
| hierarchical structure + classes.
|
| And pure markdown is not structural and not extendable by
| design - essentially just a flat list of paragraphs. Yes,
| you may have some containers there like <blockquote> and
| <ol> but that's pretty much it. Why there are no sections
| or any other form of grouping content?
|
| Markdown has exactly the same problem as MS Word /
| Richtext - they are very good in WYSIWYG but are terrible
| in semantic.
|
| Markdown.Next shall be in the golden middle between HTML
| and current MD - with modularity built-in by design.
| zoomablemind wrote:
| > ...has no Markdown representation at all
|
| Well, Markdown accepts body HTML verbatim. Sure, this
| makes it non-homogenous, but nevertheless possible, when
| needed.
| c-smile wrote:
| Just for the note: it is not ElectronJS.
|
| html-notepad is Sciter based application so its distribution is
| only 5 MB.
|
| It's sources are here https://github.com/c-smile/sciter-
| sdk/tree/master/notepad . This still uses old Sciter.TIS and I am
| porting it to new Sciter - the one that uses JavaScript.
|
| I am an author of the editor (and Sciter).
| kjksf wrote:
| You should fix Windows portable .zip so that it's not
| sciter/sciter/sdk/bin/32/html-notepad.exe
| flixic wrote:
| I almost wish it was Electron based. A bunch of things made the
| usage almost impossible.
|
| - MacOS has handy text navigation shortcuts: alt-arrow to go
| back a word, alt+shift+arrow to select a word, etc. These don't
| work, and I'm too used to them to stop using.
|
| - I'm using Colemak keyboard layout (L key inserts letter "i"),
| but keyboard shortcuts don't respect it. So in my mind I have
| to press Cmd + U ("u" is mapped to I key) to make text Italic.
| Again, this broke my usual habbits.
|
| - Common MacOS shortcuts (even Cmd + Q to quit) don't work.
|
| I like the ideas behind this editor, but now I hope someone
| ports it to HTML + JavaScript, so it works keeping all the OS-
| provided affordances.
| unicornporn wrote:
| > alt-arrow to go back a word, alt+shift+arrow to select a
| word, etc. These don't work, and I'm too used to them to stop
| using.
|
| Will sadly make it unusable for me. Thanks for saving me the
| time.
| c-smile wrote:
| If someone wants to take care about this html-notepad -
| please let me know.
|
| I don't mind if it will be commercial product or not - I'll
| help anyway.
|
| As I said - it can be ported to new Sciter (it uses JS now)
| as it is - relatively easy.
|
| Just drop me a message at https://sciter.com/contact_us/
| primax wrote:
| This feels a bit like the old reddit post about how now one
| would ever use Dropbox because you can just roll your own FTP
| server. Good points though on OS tracked features.
| [deleted]
| phist_mcgee wrote:
| For anyone who might be interested in the referenced
| comment above:
|
| https://news.ycombinator.com/item?id=8863
| c-smile wrote:
| Yes, its operation on MacOS needs some attention.
|
| In fact I've created the notepad as a demo project for Sciter
| SDK (https://sciter.com). The same as Sciter Notes:
| https://notes.sciter.com
|
| It is just that at some point someone asked me to make
| distribution so I've created that web site.
|
| Another question was to understand: donation-ware, is it a
| sustainable solution. Apparently it is not - donation does
| not even cover sums asked by Apple for allowance to develop
| software for their platform.
| toomanyducks wrote:
| Tangential, but for the pain of alternate keyboard layouts,
| I've found it easiest to use a keyboard that allows remapping
| of keys in hardware to alternate layouts (sends the 'wrong'
| keycode when you press a key). It's a bit of a hack, but it
| works much better than equivalent software hacks.
| flixic wrote:
| System having "both views" -- software view (where "i"
| might be on key L) and hardware view (of physical key
| placements) -- is very useful. For example, when using
| Colemak on Windows, I can play using WASD physical keys,
| but many games correctly name them WARS.
| thrower123 wrote:
| Is Sciter related in any way to the old Scintilla/SciTE
| editors?
| qorrect wrote:
| Got to be , right ?
| c-smile wrote:
| No.
|
| Sciter was born from my old WYSIWYG editor that I did for
| EverNote. Here is the story: https://sciter.com/10-years-
| road-to-sciter/ and here with photo:
| https://notes.sciter.com/2017/09/11/motivation-and-a-bit-
| of-...
| c-smile wrote:
| No.
|
| Sciter was born at times when term Smart Client was the
| thing.
|
| So it is "Smart Client, next ITERation". So it is pronounced
| that way: skiter.
| ethanpil wrote:
| Can you give me some info on "new Sciter - the one that uses
| JavaScript"
|
| Last time I played with Sciter it was based on a proprietary JS
| engine that wasn't fully exchangeable with common JS. Is that
| not the case any more, and Sciter will now understand ECMA
| standard JS?
| c-smile wrote:
| Please check: https://terrainformatica.com/2021/04/25/sciter-
| uses-javascri...
|
| Mainstream Sciter now uses QuickJS of Fabrice the Magnificent
| (https://bellard.org/quickjs/).
|
| QuickJS complies to ES2020 specification. And Sciter exposes
| most popular and modern DOM API so MithrilJS, PReactJS and
| other libraries work as they are.
|
| Sciter implements far not whole set of DOM API - just
| essential ones. In fact DOM API and so browsers are full of
| garbage - old historical layers of stuff from initial
| Netscape JS API, IE6, etc. For example there is no
| XMLHttpRequest but there is Fetch API :
| https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
|
| Sciter goal is not to support browser API as it is - with all
| its bells and whistles, after all desktop use cases require
| features that are not available in browsers anyway.
|
| But all non-UI libraries from NPM collection should work as
| they are in Sciter. Most of pure Vanilla JS UI components
| should also work as they are, for example LeafletJS (maps)
| https://sciter.com/sciter-js-runs-leafletjs-as-it-is/
|
| Also Sciter provides rich set of built-in components like
| JSX, Reactor, Virtual List
| (https://sciter.com/behaviorvirtual-list-for-sciter-and-
| scite...) and others.
| creshal wrote:
| What's exactly the use case, here? When would I want to use this
| and not a markdown editor, or word/gdocs/lowriter/...'s HTML
| export? Or something like TinyMCE?
|
| Static site generators, maybe? Assuming it can be taught to
| handle their non-HTML metadata...?
| c-smile wrote:
| The notepad allows you to edit the document in markdown form.
|
| That editor is essentially for "Internet Content Writers" -
| people who create textual content. It is definitely not for
| creating websites - "HTML-NOTEPAD is not a "web page editor".
| Don't even expect to create "cool web pages" with it" from the
| front page.
|
| I by myself use it with WordPress and GitHub - write content
| and then by using either html source or markdown source publish
| it on those platforms.
| creshal wrote:
| > I by myself use it with WordPress and GitHub - write
| content and then by using either html source or markdown
| source publish it on those platforms.
|
| I'm not too familiar with Github pages, but in Wordpress's
| case it sounds incredibly wasteful as you lose all the
| benefits of Wordpress's modular editor. Why even bother with
| Wordpress at that point and not use a more lightweight CMS?
| c-smile wrote:
| I am not using modular editor in WordPress - found it too
| limited and not keyboard friendly. But that's just my own
| experience - for someone it could be OK.
___________________________________________________________________
(page generated 2021-05-16 23:00 UTC)