Wax Editor is built against Prosemirror libraries. Check Prosemirror website and GitHub repo for more information.
Wax depends on the following libraries.
Notice: Make sure to check them out before starting developing Services, Components, and Theming for Wax. Detailed examples will also follow using the above libraries, but some knowledge is required.
Setting up a full Prosemirror editor ‘from scratch’, using only the core libraries, requires quite a lot of code. Wax is broken down into 6 individual packages, which when combined create a full editor, requiring minimum code. On the following overview, we will go through:
Latest published versions:
Core’s role is
A big part of wax-core is the application layer, which is responsible for the application’s lifecycle by registering and booting services, merging configs, using the schema, and gathering all prosemirror plugins.
Also holds some default prosemirror plugins that are necessary like the dropCursor, gapCursor, history, and some optional as the placeholder.
import { Wax } from "wax-prosemirror-core";
<Wax /> will mount a Prosemirror instance provided that you would pass the configuration that we will see in a later state.
Once the instance is mounted core’s task is to also communicate through WaxContext every change that is happening onto Prosemirror’s state to the Components.
We will go through all of those when we’ll create a React Component for our Editor.
Service providers are the central place of Wax bootstrapping. Your own services, as well as all of Wax’s core services, are bootstrapped via application provider and are initiated before everything else. But, what do we mean by “bootstrapped”? In general, we mean registering things, including registering service container bindings and event listeners. Service providers are the central place to configure your application. We will dive into detail on how you can create your own Service, what are the Boot and Register methods that you find inside a Service and, extra functionalities already build in which you can use.
Holds all the nodes and marks currently supported by Wax. You can either have a node/mark in “Wax node/mark structure” or a default prosemirror node/mark. Later on, we will see how a “Wax node/mark is different” and how you can add your own node/mark through a Service.
React Components that are used throughout the editor, ranging from buttons to toolbars, overlays, comment discussions, etc. Later on, we will go through on how you can add your components from your Layout inside a service and how you can have access to Prosemirror’s State to develop the functionality needed.
Various Prosemirror plugins. Check Prosemirror’s documentation on how to create a Plugin. Later on, we will go through the different ways you can pass Prosemirror Plugins into Wax.
Various reusable helper methods needed throughout Wax to support the functionality needed. Currently, they are broken down into 3 major categories (Commands, Document Transformations, and Schema helpers)
<Wax
// Sets the focus at the beginning of the document
autoFocus
// When doc changes grab the output
onChange={source=>console.log(source)}
// output in prose mirror json. (default is HTML)
targetFormat="JSON"
// content
value=""
// editor's config file
config={config}
// readonly mode
readonly
// Editor's layout
layout={myLayout}
//basic image uplading
fileUpload={file=>renderImage(image)}
/>
import {
InlineAnnotationsService,
AnnotationToolGroupService,
ImageService,
ImageToolGroupService,
LinkService,
ListsService,
ListToolGroupService,
TablesService,
TableToolGroupService,
BaseService,
BaseToolGroupService,
DisplayBlockLevelService,
DisplayToolGroupService,
TextBlockLevelService,
TextToolGroupService,
NoteService,
NoteToolGroupService,
TrackChangeService,
CommentsService,
CodeBlockService,
CodeBlockToolGroupService,
DisplayTextToolGroupService,
MathService,
FindAndReplaceService,
EditingSuggestingService,
TrackingAndEditingToolGroupService,
FullScreenService,
FullScreenToolGroupService,
SpecialCharactersService,
SpecialCharactersToolGroupService,
HighlightService,
TextHighlightToolGroupServices,
EditorInfoToolGroupServices,
BottomInfoService,
TransformService,
TransformToolGroupService,
TrackOptionsToolGroupService,
TrackCommentOptionsToolGroupService,
CustomTagInlineToolGroupService,
CustomTagBlockToolGroupService,
CustomTagService,
} from 'wax-prosemirror-services';
Base Tool group: undo, redo, save
Inline Annotations Tool group: strong, italic, link, strikethrough, underline, subscript, superscript, small caps
Lists Tool group: numbered list, bullet list
Image Tool group: image
Table Tool group: create table, edit table dropdown that includes: insert/delete row, insert/delete column ,merge cells, split cell, delete table, Toggle header column, Toggle header row
Display Tool group: Title, Author, Subtitle, Epigraph Prose, Epigraph Poetry, Heading 1, Heading 2, Heading 3
Text Tool group: Paragraph, Paragraph Continued, Extract Prose, Extract Poetry, Source Note, Block Quote
Notes Tool group: notes
Comments Tool group: comments
Special Characters group: special characters
Code Block: code block
Tracking and Editing: ``
Full Screen group: full screen