How to contribute?

[MuhammedAlkhudiry]

What is the workflow for developing/building the project? What are the key features that are missing?

[MuhammedAlkhudiry]

Missing features I noticed:

• copy, cut (the paste is mostly working)
• right-click
• formatting (making it working and expanding it)
• selecting whole words while pressing control.
• selecting words when double-click, selecting paragraphs when triple-click
• selection disappears when right-clicking
• file-management (new, open, save as DOCX, PDF,..., load)
• insert media, table,...
• search/replace
• settings
• statistics (num of words, chars, else..) easy
• undo, redo

[yuzhenmi]

Hey! Thanks for your interest, it might be good to hold off for a bit before contributing, as I'm currently doing a major refactor to improve various elements of the codebase. This is my first time building a project like this and I've definitely made some poor design choices!

I expect the refactor to be merged after another week.

As it currently stands, the development workflow has 2 parts: Build the editor core with watcher:

# Install dependencies
cd packages/core
npm install

# Build and watch
npm run dev

Run the example project

# Install depdenencies
cd examples/taleweaver-example-react
npm install

# Run dev server
npm run start

Areas that are covered by this refactor:

• Separate interfaces and implementation
• Decouple the various parts of the codebase via dependency injection of services
• Add tests - with dependency injection, units are much more testable in isolation
• Simplify updates to tree data structures by adopting more immutability
• Rethink the design of implementing document elements (paragraphs, lists, etc)
• Improve the configuration setup to be fully declarative
• Loosely couple different parts of the codebase with the observer pattern instead of global pub-sub to avoid namespace collisions

[MuhammedAlkhudiry]

Great, but is react required or just an example? Also, please when you do finish, tell me and maybe update the README about how to contribute.

Also, while working, consider building an APIs for selection, custom events,... Quill.js is great example. that's would make expanding the editor alot easier.

[jkhaui]

I've also been looking to contribute, or at least get a local version running, but have had weird issues with the TypeScript loader not working with the React example. So I'll happily wait till Talewever is more stable.

@MuhammedAlkhudiry depending on what you're looking to achieve, perhaps you'd be interested in helping me with my own web-based Word processor: https://github.com/jkhaui/rxeditor-2 (I apologise for advertising my own repo here; just thought we could all benefit by working on the same basic features). My version is also a WIP, but it has pagination and all the basic text editor functionality working (e.g. text selection, inline styling, etc.).

There are still a couple of challenges to overcome, so let me know if you're interested in helping out. My project (RxEditor) differs to Talewever in that it uses Draft.js as its core and is thus tightly coupled to React. Here's a demo (click "try without an account"): http://rxeditor.s3-website-ap-southeast-1.amazonaws.com/

[MuhammedAlkhudiry]

sorry, but your editor uses contenteditable, and the whole point is to build layout engine without it.

[jkhaui]

No worries, there's many ways one could build a Word Processor - my version uses Draft.js as an abstraction over contenteditable. That means all the basic text editing functionality doesn't need to be re-written. But if you're after full control of the DOM, then yes Taleweaver looks great. Look forward to seeing its progress.

[yuzhenmi]

@MuhammedAlkhudiry Don't worry, React is not a dependency, it's just used to conveniently setup a demo / development environment. The dependencies are listed here: https://github.com/yuzhenmi/taleweaver/blob/master/packages/core/package.json As you can see, the only dev dependency is Typescript.

I plan to add more dev dependencies for testing (jest) but keep runtime dependencies down to zero for the core package.

I've not yet used Taleweaver in my own products, right now I'm still refining the core architecture. As you mentioned, there are still a number of necessary features that are missing. Once those are implemented, we will design a modern developer experience for those looking to embed the editor in their own projects, as well as an extension system for those looking to contribute to and extend the ecosystem.

[MuhammedAlkhudiry]

how is the refactoring going? :)

[yuzhenmi]

Had a bit of a hiccup, but should be able to get it out this weekend. Sorry about the delay.

[MuhammedAlkhudiry]

how is the refactoring going?

I have a few ideas:

• Consider making the editor PWA since the offline editing may become important.
• I noticed few bugs related to pressing Enter to create new line/paragraph:
• there is a freezing/blocking when press Enter in large documents (about 100 pages) for about 2-3s which is annoying.
• when you keep typing at the end of a page and you start a new page, while you type in the new page the editor will keep creating new pages until you press Enter (seems that pressing Enter recalculate the number of pages).
• Consider using Web Workers since the editor will need heavy processing when changing the UI is not required (noticed that Google Docs suffer from blocking when pasting huge text, they could use Web Worker and put a loading screen, but maybe because IE does not support it)

[yuzhenmi]

Yeah, definitely taking a lot longer than I expected, still recovering existing features before the refactor and fixing bugs. Overall I'm pretty happy with the design improvements though.

Won't make any promises on dates anymore, though I am actively making progress. If you're curious about what's happening, the branch is improve-decoupling.

@MuhammedAlkhudiry Response to your ideas:

Consider making the editor PWA since the offline editing may become important.

PWA is outside the scope of this project, how Taleweaver is implemented should not impact your ability to support PWA

I noticed few bugs related to pressing Enter to create new line/paragraph:

Line splitting is hackishly-implemented, hopefully the refactor can draw some improvement

there is a freezing/blocking when press Enter in large documents (about 100 pages) for about 2-3s which is annoying.

I am well aware of this. The cause is that the current algorithm for updating the document in response to changes is not optimized for this scenario. When a change occurs in the model tree, the node containing the change is recreated. This means when a block gets inserted, the entire document gets recreated. This is definitely something that can be optimized, such that node insertion or deletion does not result in the recreation of the parent node, it just has not been a priority for me thus far, and it would make the update algorithm more complicated. Feel free to pitch in if you have ideas!

when you keep typing at the end of a page and you start a new page, while you type in the new page the editor will keep creating new pages until you press Enter (seems that pressing Enter recalculate the number of pages).

Interesting, didn't know about this bug. Not sure if the refactor will make it go away, we'll see.

Consider using Web Workers since the editor will need heavy processing when changing the UI is not required (noticed that Google Docs suffer from blocking when pasting huge text, they could use Web Worker and put a loading screen, but maybe because IE does not support it)

Web workers are definitely interesting. I think for most types of edits on the document, performance without using web workers is sufficient with the right algorithm, but copy & paste could be a valid use case of web workers, as parsing of the pasted content can be done without blocking the main thread. Although I do want to be careful with what to offload to web workers, certain tasks for a word processor may not be straightforward to do asynchronously since it would not guarantee the order of execution, for example, I would not want any race condition to occur when I type 2 letters really quickly such that the order gets reversed. Copy & paste has not been implemented properly yet, maybe this is something you can help with? (after the refactor is done) :)

[MuhammedAlkhudiry]

just as a challenge, I'm working in my own word processor and I noticed that you wrote:

        const ctx = this.$canvas.getContext('2d')!;
        const weight = textStyle.weight!;
        const size = textStyle.size!;
        const font = textStyle.font!;
        const letterSpacing = textStyle.letterSpacing!;
        ctx.font = `${weight} ${size}px "${font}"`;
        const measurement = ctx.measureText(text);
        const width = letterSpacing === 0 || text.length <= 1 ?
            measurement.width :
            measurement.width + (text.length - 1) * letterSpacing;
        return {
            width,
            height: size,
        };

this line const font = textStyle.font!;

I think you want: const font = textStyle.fontFamily!;

since font return shorthand font properties.

this is a critical line, that's why I mention it.

[MuhammedAlkhudiry]

Copy & paste has not been implemented properly yet, maybe this is something you can help with? (after the refactor is done)

I believe copying and cutting are straightforward if you can get the selected text, but paste would be parsing challenge, and I'm familiar with parsing.

[yuzhenmi]

this line const font = textStyle.font!;

I think you want: const font = textStyle.fontFamily!;

since font return shorthand font properties.

Note textStyle is a custom interface defined in Taleweaver, it is not a browser native CSSProperties object. I've defined this interface such that the key is named font instead of fontFamily.

I believe copying and cutting are straightforward if you can get the selected text, but paste would be parsing challenge, and I'm familiar with parsing.

Exactly, copying just involves converting the model tree into HTML - fairly straight forward to do since both are trees. Parsing for paste though seems to be quite challenging - in HTML, the same visual outcome can be achieved by an infinite number of document tree setup, because elements can be wrapped without any restriction; in Taleweaver, this is not the case, for example, you cannot wrap a paragraph in another paragraph. Consolidating can be both technically challenging and subjectively opinionated. AFAIK most word processors / WYSIWYG editors out there have different paste behaviour.

[yuzhenmi]

I've merged the refactor https://github.com/yuzhenmi/taleweaver/pull/81. I'm sure there are bugs and regressions, will work through and fix them.

[MuhammedAlkhudiry]

I've merged the refactor #81. I'm sure there are bugs and regressions, will work through and fix them.

Great job.

So, I cloned the project and did install & build but know how to include it in an HTML to develop it?

[yuzhenmi]

I'll add it to the README later.

You'll have to first go to packages/core, run npm install and npm run dev, this starts a dev server that builds the editor core as changes occur.

Then you'll have to go to examples/taleweaver-example-react, run npm install and npm start to launch the example app, which uses the built editor from packages/core. This will launch a dev server on port 3000, which you can access to see the example.

[hiyizi]

"dependencies": {
    "@taleweaver/react": "file:../../packages/react",
    "react": "^16.13.1",

Duplicate React?

[yuzhenmi]

Yes, I added a tiny React binding package and started using it in the example, but there are 2 instances of React bundled because of the local dependency setup. To resolve it temporarily, you can link one React node_module to the other (so they are the same). I am exploring adopting Lerna to set up a monorepo and hoist the dependencies, but am not 100% happy with how Lerna works, it's not seamless. Please feel free to make a PR if you have better ideas.

[onuraltas]

I want to contribute to this project. Is it too early to implement inserting media and table? If not what is the best way to do it. Any suggestions?

[yuzhenmi]

Yeah, still too early to do those things. https://github.com/yuzhenmi/taleweaver/issues/108 is my current priority, I'd like to resolve the issue of text fragmentation first, and it'll almost certainly impact the model data structure.