Coder Social home page Coder Social logo

mkoskim / mawejs Goto Github PK

View Code? Open in Web Editor NEW
3.0 3.0 3.0 10.12 MB

Mawe writer's editor with ElectronJS, React and NodeJS. Third generation of the editors I have written for my own use.

License: MIT License

CSS 6.28% JavaScript 93.29% HTML 0.42%
story editor outliner text-editor writer-tools electronjs slate-react slatejs

mawejs's People

Contributors

dependabot[bot] avatar mkoskim avatar mnajibi avatar natlibfi-koskimim avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

mawejs's Issues

Extra whitespace removal

Although it is good that writer can write just those characters s/he wants, it would be great to have extra whitespace removal: leading and trailing whitespaces, and unnecessary extra spaces between words.

Workspace: Support for collections

NOTE: Before we can have support for collections, there needs to be support for workspace first. Then, it would be nice to export stories in the workspace as a collection. Example use cases:

Short story collections: You are making a collection from short novellas or novellettes: collect them to one workspace, and export that workspace as a collection.

Long novels: There will be limit how much text is manageable in one story, even if we implement support for multiple sections. When the limit comes, you may split your story to multiple "substories", e.g.

  • by parts: story.part1.mawe, story.part2.mawe, ...
  • by chapters: story.chapter1.mawe, story.chapter2.mawe, ...

You keep the parts in the same workspace, and then export the whole story as one.

REMINDER: To support splitting a story over multiple files, there is a need to support moving scenes & parts between files. That same feature then of course serves for creating "spin-offs" (scene or part in one story is moved to new story) as well as merging stories.


Support for collection:

  1. Get all the individual stories you like in to a workspace
  2. Write cover page (title etc) for a workspace to make it a collection
  3. Export workspace as RTF file

Collection can also be a solution to make multi-part novels (trilogies etc). We might need support common notes section for a workspace.

New IDs not always generated

There are issues with block IDs generated for indexing.

It happens in various circumstances, like copy-pasting indexd elements when editor leaves tails. Also, when you use browser's internal drag'n'drop in editor, if you move indexed elements, there will be duplicate IDs when the DnD leaves "a tail" behind and it will retain the ID of the moved block.

At this point, it would probably be better to make brute force solution: when normalizing, go through the blocks with ID, and generate new ones, if there are conflicts.

History lost when changing view

When changing view, Slate editors loose their history. It might be little annoying, so we might need to do something about it.

Search: Match list

Background

Many modern coding editors like Visual Code create a list of matches when searching. It is very handy! So, we need to implement similar.

Implementation

For right hand index, add a search match list as an option (in addition to body index).

If anyhow possible, it would be best to generate the search match list from the SlateJS editor decorations. We already use decorate() function, which generates an up-to-date list of matches to be highlighted. If we can access that and show it to user, our problems may be solved.

Possible idea

Add an arrow-left button to search box. Pressing it will take search box to body index menu, and replace body index with list of matches. Also, search box left arrow will be changed to right arrow, and pressing it will take search box back to editor menu, and show index menu.

Word frequency table

Split text to words and show individual words with their count in text.

  • Sort: ascending / descending
  • Blacklisting
  • Search box for word table
  • Click to go through occurences

Warn for unsaved files

Currently, editor does not know, if the file is saved or not. So, you can press Ctrl-Q (Quit) without receiving any warnings.

Implement a mechanism to check, if editor buffer is dirty.

Basic file access

Usable file access: At least one workspace, which allows you to continue where you were last time, but multiple workspaces would be great to switch between projects.

TODO (Basic features):

  • DONE: New file: Create new file
  • DONE: Open file: Choose a file to open
  • DONE: Save file: Later, we might keep a list of buffers, so that we can have multiple previous versions stored

Export: Edit text in preview

It would be good that you could edit text in preview. Nothing fancy, thought, but for example fix typos and such without switching back to editor.

What is possible:

  • Fix your paragraph content: fix typos, change expressions, change wording and such

What is not likely possible:

  • Move, add & remove paragraphs
  • Move, add & remove paragraph breaks (scenes, parts)
  • Add comments and other invisible stuff

Search forward/backward when at last/first occurrence

Currently, search forward (Ctrl-G) and backward (Ctrl-Shift-G) do not work very intuitively when there is nothing more to find. Backward search removes the selection and stays at the first char. Forward search removes the selection and goes forward one step at time.

Correct behaviour: in both cases, keep the word selected. Give some audio/visual feedback that there is nothing more to find.

Diagram: Story speculation

To be honest, there is not much joy just showing the diagram. To fulfill its purpose, you should be able to edit the story in the diagram view!

Currently it only works for complete stories, and for a tool it is far too late. The diagram should work also for incomplete stories, when you have the best chances to modify the story structure!

The diagram needs tools to "speculate" the story from early on.

Indices: We need to add both body and notes index to diagram view, with drag'n'drop enabled. This way you can move parts and scenes within the body, and also between body and notes.

Filling: You should be able to "speculate" the length of scenes and parts. I have thought that there would be "fill" attribute in parts and scenes, which is sort of "minimum length" for that block in the diagram view. Modifying "fill" would modify the length of the block in the diagram.


I have many incomplete stories which I try to use as a test bench when developing the features. What I can say at this point, is that incomplete stories are really incomplete. They have lots of small scenes which will be merged together later, and they really don't have any real structure. So, completing this issue will be a challenging task :) But we can go with small steps at time.

Workspace / Multifile editing

Currently MaweJS is single file editor. To make it usable, make it hold multiple files at once.

This will cause problems with SlateJS editor component, so we need to examine the issue more closely.

Scene break not always created after part break

We need to ensure, that part breaks are followed by scene break.

It is not mandatory for editor and file load/save, but index drag-n-drop will break, if they are not generated. Generating breaks will mess up drag-and-drop, so they need to be added by editor itself.

In some point of future, we want to remove "visual clutter" from text in editor by hiding unnecessary breaks, but the approach is different.

Editor element focusing

Locating cursor to certain loction, scrolling editor view to make that location visible and focusing the editor is needed in many places:

  • Clicking element in index
  • Search: when pressing enter in search box, place cursor to first match
  • Future: outliner / export preview doubleclick --> edit doubleclicked element in editor

We need to find a reliable way to do this. Current implementation trust on delays and such, but it has all sorts of errors & warnings when rendering is not yet finished after the delay.

Integrate name generators

For many stories, you need names for your characters (and sometimes places as well). One of my long time plan has been to integrate name generators to stories. Some ideas about it:

  • Store the used names, so that they are not generated again
  • Generator selection: this could be suitable net generator, or it could be some kind of plugin
  • Generator settings, if needed: for example, generating names starting with "A"

Clickable index to export preview

Create clickable index to export preview to help go through the draft.

Use tags to create clickable links and their (invisible) targets.

Spellchecking and hyphenation

Currently, Chrome browser - used with ElectronJS - supports practically only English spellchecking. It does not check the lang property of a HTML element to turn spellchecking off.

If story language is something else, spellchecking needs to be turned off.

In the future, try to choose some suitable spellchecking / hyphenation framework / library, and use it with the editor.

RTF export

Implement document export to RTF file. It can be ported from python version. Exporting also needs head info (title, author, etc) editing, but that's another issue.

Import: Implement basic framework

Editor should be able to load files in different formats, and convert them to a mawe story:

  • Import as document: open a file, and make it a story document
  • Import as part / scene: attach a file as a part or scene to an existing document

Supported file formats:

  • Plain text
  • RTF, is anyhow possible
  • Old .moe files, older .mawe files (covert to a new format)

Persisting settings

Currently, settings are resetted when editor is restarted. We need to save the settings.

The most important persistent settings would be:

  • The last loaded file: this way, when starting editor again, you would continue where you left last time.
  • Remember choices: view selection, and selections in the views (like index visibility, word count format, ...)

Organize settings to different "domains":

  • User/Account spesific preferences
  • Computer spesific settings, e.g. window size and position
  • Document spesific settings

Background

Very old MaweJS used Redux state, wrote settings to disk and loaded them on startup. I just wasnt satisfied with that solution. Redux is not currently used, although it probably comes back in the future.

Export: Basic Export improvements

Head info editing:

  • DONE: Edit head info: author, title, subtitle and such
  • DONE: (Sort of) Select which head info is included to exported draft
  • Choose language
  • In future: autodetect language if not set
  • Checkbox to enable/disable language info to turn spellchecking on/off when reading exported draft

Index:

  • DONE: Make clickable index (helps checking parts of your to-be-exported draft)
  • DONE: Double-click preview element --> go to edit that part
  • DONE: Double-click to switch to editor?

Bonus:

  • Show words, missing and words+missing in export view: missing text is exported, so show the total number of words exported to a doc.

Word filler

In certain cases, an element filling the word count to certain number could be useful:

  1. If you have set some target length for your story and its individual parts. For example, you like to write 30k novel, you have an outline with 30 elements, and you would like every element to become a 1k text block.
  2. You are matching your story to some story template: you have decided your midpoints, your climax and such, and you like to see where to write and how much to meet the goal.

Let's consider to make an element to fill the missing words.

Search: Match counts (current / total)

Show total amount of occurrences in search, as well as the index of the current occurence.

At some point of future, we want to implement word frequency counter. When this is implemented, it would be really nice that you can go through the occurences.

Basic head info editing

Editing head info in various places: editor itself, exporting preview.

Basic head info:

  • Name (work name)
  • Story title (and possible subtitle)
  • Author (either real or nickname)
  • Backcover text or synopsis

Other head info, e.g.

  • Project status & deadline
  • Info about publishing
  • And so on

File Drag'n'Drop

Allow users to drag and drop files to editor.

Native files (.mawe, .moe) are opened as they are. Non-native files (.txt, .rtf) are imported. We might open a dialog to preview the drop, at least when we are dropping non-native files.

Basic file management

Integrate file management features to mawejs. This would make working with larger projects consisting several stories easier. Features:

  • Find files
  • Scanning: Some sort of project manager, which scans stories from directories
  • Move files
  • Delete files

Escape text content in .mawe files

We need to escape control characters (<, >, &) in .mawe files, otherwise they can not be loaded.

Looks like xmljs loader can "de-escape" escaped characters, so we only need escape text content when saving.

Addition: It looks like it is a bug / missing feature at xml-js side: nashwaan/xml-js#69

Hide unnecessary breaks in editor

For best possible first time user experience, it would be great that the empty document does now show unnecessary breaks, so that in editor the text would look like this:

Head elements [title, author]
...text...
Scene 2
...text...
Scene 3
...
Part 2
...text...
Scene 2
...text...
...

Internally, those breaks are needed, so data inside the editor would look like this:

Head elements
[hidden Part 1]
[hidden Scene 1]
...text...
Scene 2
...text...
Scene 3
...
Part 2
[hidden Scene 1]
...text...
Scene 2
...text...
...

That is, scene and part breaks act more like separators, not container headers. These breaks need to be placed correctly in editor anyways! They just can't be omitted, but they might be invisible!

The problem: Getting them visible for naming! There needs to be some glues in GUI that there are some hidden elements there, so that you can access them.

Index DnD flickering

When item is dropped, next render uses old value and causes flicker. This is caused by deferred rendering. React first renders the old index, and only after that it renders the updated one.

Without deferred render, the responsiveness of editor is not good.

At some point, find a way to remove flicker.

Organizer improvements

First: Organizer as it is currently, lacks the ability to add & remove scenes are parts. It can only move scenes & parts around.

Second: After lots of improvements to basic editor, it seems that current Organizer view is bit useless feature. It will be even more useless, when you can reorganize your story in the Diagram view.

If we want to keep Organizer, it needs to rediscover its purpose - what it is used for, and why it would be useful for writer.

Support for versioning

Versioning - or archiving - means to store an existing version of your manuscript, and start working with new one.

We should support viewing current and old versions side-by-side, to use the old one to help writing the new.

Folding

Implement scene/part folding in editor.

More robust in-editor DnD

Current editor index DnD implementation has certain bugs.

First bug is "ghost" parts and scenes. They are related to attempts to keep data coherent: In edit2section(), and empty part or scene block is implicitly created if there are "hanging" paragraphs (e.g. between title and first part, or between part and first scene). These will be shown in indices, but they don't exist in editor.

The second one is "flickering" when DnD ends. This is caused by deferred rendering. React first renders the old index, and only after that it renders the updated one.

Paragraph style: bold, italic

Implement a feature to change entire paragraph rendering style: regular, bold, italic. Not very high priority, thought.

By default, MaweJS most probably will never support any fancy text formatting. Most likely the only supported styling will be emphasis, to emphase (italic) certain words from the text.

But there is some niche needs to bold or cursive certain text blocks. I'm not that fascinated about them - many times the italic blocks are dream descriptions and such - but even I have some need for those things.

Editor performance / responsiveness

SlateJS editor itself is quite good in terms of performance and responsiveness. But when combined with indices and such, we make lots of operations each time a key is pressed:

  • IDs are fixed for indexing
  • Slate buffer is transformed to doc structure
  • Word counts are calculated

We could (1) combine operations needed for index, and (2) delay them a bit, so that they are not refreshed immediately.

Project manager / Open Folder

Open a directory, scan all .mawe / .moe story files, peek their header info (title, status, word count) and make them a list.

Furthermore, group the found docs in different ways (published, sketch, draft, etc).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.