Partly for use in my own projects and partly for fun when I'm stuck at home, I try to create another "block" based editor.
So far I've used simple objects, starting with a global one
window.myeditor Object, then different sub-objects to handle different things. For example I have
window.myeditor.toolbar abstract functions for creating toolbars in each block. I also used it
Object.create to expand my base
window.myeditor.block Object to create different block types (paragraph / heading / etc.) and then create instances of these objects for each element on the page.
However, it gets a bit messy. I cannot use global variables in the objects because they are not instantiated again
Object.create and so all my objects see exactly the same variables, not a big problem, but not ideal. I also create functions like
_focus() in my main block object, which does some standard tasks and then calls
focus() from the inside, a function that should be replaced by subordinate objects so that they can expand this functionality. I also find myself duplicating code (e.g. code to make it bold / italic) that I could probably centralize if I had a clearer way of "modularizing" logic.
Looking at how other projects work, the current favorite seems to be building on classes, most likely via modules, although I'm struggling to familiarize myself with a basic implementation, and I think I'm just screwing up the basic architecture.
For example, I currently have something in the following direction:
Editor Class / module with a global instance for the main editor (not that this is required, but I would ideally design it so that it does not depend on having a global instance for anything, so that multiple editor instances would actually be possible without being mutually exclusive bring to ). This instance contains an instance of
BlockRegistry The various block types and a reference to their class are stored here. The editor also has a number of
BlockContainer Instances that control a block section on the page. There is a basis
Block Class for handling a single block of content to be expanded by plugin block types.
BlockContainer Class must list all HTML sub-elements and create one
SomeBlockTypeThatExtendsBlock Instance for them, with the right handler, but to do this, they need to access them
BlockRegistry Instance to see if it's a supported block type and the right class.
I can imagine that I get this problem with different class instances that regularly need access to functions of other instances, but I'm not sure which method is right here, except to constantly access the global instance within modules and pass references everywhere. or just put a code in one place that may have to point to something else.
I think I just miss something obvious and I screw up the basic design.