From 22ae8904fe128613c550d3ff9a886375266b854a Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Thu, 10 Dec 2020 16:04:52 +0200
Subject: [PATCH] fix mobile view
---
README.md | 81 ++++++++++++-------
editors/editoria/src/config/configMobile.js | 3 +
wax-prosemirror-components/package.json | 2 +-
.../SpecialCharactersComponent.js | 11 +++
wax-prosemirror-core/package.json | 2 +-
wax-prosemirror-plugins/package.json | 2 +-
wax-prosemirror-schema/package.json | 2 +-
wax-prosemirror-services/package.json | 2 +-
wax-prosemirror-utilities/package.json | 2 +-
9 files changed, 71 insertions(+), 36 deletions(-)
diff --git a/README.md b/README.md
index 8a5094ab4..fd3e484d8 100644
--- a/README.md
+++ b/README.md
@@ -2,19 +2,37 @@
<h1>Wax Editor</h1>
</div>
-| [](https://github.com/christos8333/wax-prosemirror/raw/master/LICENSE) |
-| :---------------------------------------------------------------------------------------------------------------------------------------: |
+| [](https://gitlab.coko.foundation/wax/wax-prosemirror/raw/master/LICENSE) |
+| :------------------------------------------------------------------------------------------------------------------------------------------: |
This library is being developed by the [Coko Foundation](https://coko.foundation/).
+Wax Editor is built on top of the Prosemirror library. Check Prosemirror [website](https://prosemirror.net/) and [GitHub repo](https://github.com/ProseMirror) for more information.
-Wax Editor is build against Prosemirror libraries. Check Prosemirror [website](https://prosemirror.net/) and [GitHub repo](https://github.com/ProseMirror) for more information.
+## Roadmap
+
+Wax-prosemirror is under active development. The current roadmap is as follows:
+
+### December 2020
+
+Beta version, including some new features:
+
+- Image Captions
+- Custom tags
+- Find and replace
+- Transform cases
+- Word counter
+- Spellchecker
+
+### January 2021
+
+V1.0, freeze new feature development, focus on stability, testing and bug fixes
## Get up and running
-Run a local version of the editor
+Run a local version of the Editoria's editor
-1. `git clone git@github.com:christos8333/wax-prosemirror.git`
+1. `git clone git@gitlab.coko.foundation:wax/wax-prosemirror.git`
2. `yarn with node >= 12`
@@ -26,8 +44,6 @@ Run a local version of the editor
Scripts: `yarn` , `yarn clean`, `yarn reset`
-### Check the current online demo of the [editor](https://christos8333.github.io/editor-demo/)
-
## Introduction
Wax depends on the following libraries.
@@ -42,8 +58,8 @@ Wax depends on the following libraries.
Currently Wax is under heavy development. Master holds a as possible as stable version of the editor. For latest versions see [here](#latest-versions). Documentation follows, but it is rather limited for now. It lists all the basic parts , and includes a brief explanation on how to configure Wax for your own project. More detailed examples will follow.
-Check editoria [editor](https://github.com/christos8333/wax-prosemirror/blob/master/editors/editoria/src/Editoria.js), editoria's [package.json](https://github.com/christos8333/wax-prosemirror/blob/master/editors/editoria/package.json)
-and editoria's [configuration file](https://github.com/christos8333/wax-prosemirror/blob/master/editors/editoria/src/config/config.js) for a full example on how to mount Wax and all available packages(services).
+Check editoria [editor](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/editors/editoria/src/Editoria.js), editoria's [package.json](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/editors/editoria/package.json)
+and editoria's [configuration file](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/editors/editoria/src/config/config.js) for a full example on how to mount Wax and all available packages(services).
### Editor Properties
@@ -55,7 +71,7 @@ onChange; // when the editor's surface is updated (perform an action ex. save)
value; // the actual HTML content of the editor
fileUpload; // used for uploading images (should return a promise with the actual file path)
placeholder; // a placeholder used for empty documents
-config; // adds on the editor anything from new services, tools, Pmpplugins etc. Check [editoria config](https://github.com/christos8333/wax-prosemirror/blob/master/editors/editoria/src/config/config.js)
+config; // Editor's configuration. Menus, packages, PM plugins etc Check [editoria config](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/editors/editoria/src/config/config.js)
readonly; // editor in in read-only mode
onBlur; // on focus lost
layout; // used to create your own Layout using React components
@@ -79,7 +95,16 @@ debug; // dev-tools (https://github.com/d4rkr00t/prosemirror-dev-tools)
7. _Text Tool group_: `Paragraph`, `Paragraph Continued`, `Extract Prose`, `Extract Poetry`, `Source Note`, `Block Quote`
8. _Notes Tool group_: `notes`
-9. _Comments Tool group_: `comments` ((currently under development))
+
+9. _Comments Tool group_: `comments`
+
+10. _TrackChange Tool group_: `TrackChange`
+
+11. _Math_: `math` (https://github.com/benrbray/prosemirror-math)
+
+12._Special Character_: `SpecialCharacters`
+
+13. _Find And Replace_: ``
<h2> wax-prosemirror-core </h2>
@@ -87,7 +112,7 @@ The role of wax-core is
- Mount a prosemirror instance
-- Initiate default [services](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-core/src/config/defaultConfig.js)
+- Initiate default [services](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-core/src/config/defaultConfig.js)
1. LayoutService
@@ -99,7 +124,7 @@ The role of wax-core is
5. ShortCutsService
-A big part of wax-core is the [application layer](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-core/src/Application.js), which is responsible for the application’s lifecycle by registering and booting services, merging configs, using the schema
+A big part of wax-core is the [application layer](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-core/src/Application.js), 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.
@@ -113,12 +138,6 @@ For more information on how a Wax node/mark is different check the [SchemaServic
React components to support various features of the editor from buttons to overlays to comment discussions etc. Right now is really basic as the focus is not yet on UI.
-<h2> wax-prosemirror-themes </h2>
- Holds the different themes of the editor. Check the options in the [CokoTheme](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-themes/src/coko-theme)
-
-<h2> wax-prosemirror-layouts </h2>
-Holds different layouts of the editor. Through the layout service you can configure the areas of different components. As an example check [EditoriaLayout](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js)
-
<h2> wax-prosemirror-utilities </h2>
Various helpers methods needed throughout Wax to support the funcionality needed.
@@ -131,7 +150,7 @@ Editors are private pakages inside the monorepo, for development/demo purposes.
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.
-If you open [editoria's config file](https://github.com/christos8333/wax-prosemirror/blob/master/editors/editoria/src/config/config.js),
+If you open [editoria's config file](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/editors/editoria/src/config/config.js),
you will see the config file where you can configure the extra services (apart from those Wax will load on init) of your editor.
These are all of the service provider classes that will be loaded for your application.
@@ -139,7 +158,7 @@ In the following overview we will see how to write our own service providers and
<h3>Writing Service Providers</h2>
-All service providers extend the [Service](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-core/src/services/Service.js) class. Most service providers contain a register and a boot method. Within the register method, you should only bind things into the service container.
+All service providers extend the [Service](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-core/src/services/Service.js) class. Most service providers contain a register and a boot method. Within the register method, you should only bind things into the service container.
<h3>The Register Method</h3>
@@ -196,7 +215,7 @@ In the above example we bind ShortCuts to a factory method which injects PmPlugi
So, what if we need to register a view component within our service provider? This should be done within the boot method. This method is called after all other service providers have been registered, meaning you have access to all other services that have been registered.
-A good example could be the [MenuSerivce](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-services/src/MenuService/MenuService.js)
+A good example could be the [MenuSerivce](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-services/src/MenuService/MenuService.js)
```javascript
boot() {
@@ -230,7 +249,7 @@ class InlineAnnotationsService extends Service {
```
2. Within any of your service provider methods, you always have access to the app, config properties .
-3. Dependant functionality between services. An example of the dependency between two services are [linkService](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-services/src/LinkService/LinkService.js) and [OverLayService](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-services/src/OverlayService/OverlayService.js) where OverLayService registers a function
+3. Dependant functionality between services. An example of the dependency between two services are [linkService](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-services/src/LinkService/LinkService.js) and [OverLayService](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-services/src/OverlayService/OverlayService.js) where OverLayService registers a function
that adds a component to the overlay area and LinkService calls OverLay and adds it’s component. ShortCut Service could be another example where each of the services like Strong, paragraph etc can call it to add a shortcut.
## Core Services
@@ -312,11 +331,13 @@ If the above 2 services are registed SchemaService will merge those 2 nodes into
### LayoutService
-This service enables us to set a layout for the editor. Internally Wax calls the setLayout method to apply a layout. How can you write your own layout. Check Editoria's [layout](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js).
+This service enables us to set a layout for the editor. Internally Wax calls the setLayout method to apply a layout. How can you write your own layout. Check Editoria's [layout](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/editors/editoria/src/layout/EditoriaLayout.js).
-A layout is a react component which has a prop the mounted prosemirror instance in order to place within the layout. You can also have your own “Areasâ€. For example in EditoriaLayout we have the following
+A layout is a react component which has a prop the mounted prosemirror instance in order to be placed within the layout. You can also have your own “Areasâ€. For example in EditoriaLayout we have the following
```javascript
+import { ComponentPlugin } from 'wax-prosemirror-core';
+
const LeftSideBar = componentPlugin('leftSideBar');
const RightSideBar = componentPlugin('rightSideBar');
const TopBar = componentPlugin('topBar');
@@ -374,11 +395,11 @@ Lastly Layout has a core method which is called ComponentPlugin. Is used in orde
### ShortCuts Service
-Another Core Service of Wax for registering shortcuts within a service. Check as an example , how it is used on Strong [Service](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-services/src/InlineAnnotations/StrongService/StrongService.js).
+Another Core Service of Wax for registering shortcuts within a service. Check as an example , how it is used on Strong [Service](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-services/src/InlineAnnotations/StrongService/StrongService.js).
### Rules Service
-Core Service of Wax for registering prosemirror rules. Check editoria [config](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-core/src/config/defaultConfig.js) or it can be used
+Core Service of Wax for registering prosemirror rules. Check editoria [config](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-core/src/config/defaultConfig.js) or it can be used
from within any service similar to Short Cuts as an `addRule` method is available.
### Menu Service
@@ -387,10 +408,10 @@ Is used for adding menus to the editor.
## Other Stuff
-1. How to create overlays. Check as an example the [link overlay](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-services/src/LinkService), which uses Wax's default overlay.
-2. How to create toolgroups Check as an example Inline Annotations [here](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-services/src/InlineAnnotations) for the services and [here](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-services/src/WaxToolGroups/AnnotationToolGroupService) for creating your toolgroup
+1. How to create overlays. Check as an example the [link overlay](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-services/src/LinkService), which uses Wax's default overlay.
+2. How to create toolgroups Check as an example Inline Annotations [here](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-services/src/InlineAnnotations) for the services and [here](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-services/src/WaxToolGroups/AnnotationToolGroupService) for creating your toolgroup
3. How to create modals inside the editor (under development)
-4. Adding prosemirror plugins. You can do it either from the config or from inside any service with `PmPlugins.add("shortcuts", shortCuts)` or you can have access to the plugin by [`pmplugins.get("imagePlaceHolder")`](https://github.com/christos8333/wax-prosemirror/blob/master/wax-prosemirror-services/src/ImageService/Image.js#L30)
+4. Adding prosemirror plugins. You can do it either from the config or from inside any service with `PmPlugins.add("shortcuts", shortCuts)` or you can have access to the plugin by [`pmplugins.get("imagePlaceHolder")`](https://gitlab.coko.foundation/wax/wax-prosemirror/blob/master/wax-prosemirror-services/src/ImageService/Image.js#L30)
5. Exclude certain tool from toolgroups. `toolGroups: [{name: "Base", exclude: ['Undo']}, "Annotations", "Notes", "Lists", "Images", "Tables"]`
6. Adding certain tools into more section `toolGroups: [ "Base", { name: "Annotations", more: ["Superscript", "Subscript", "SmallCaps"] } ]`
diff --git a/editors/editoria/src/config/configMobile.js b/editors/editoria/src/config/configMobile.js
index 2ece02d82..150840c15 100644
--- a/editors/editoria/src/config/configMobile.js
+++ b/editors/editoria/src/config/configMobile.js
@@ -30,6 +30,8 @@ import {
TextHighlightToolGroupServices,
} from 'wax-prosemirror-services';
+import { DefaultSchema } from 'wax-prosemirror-utilities';
+
import { WaxSelectionPlugin } from 'wax-prosemirror-plugins';
import invisibles, {
@@ -60,6 +62,7 @@ export default {
},
],
+ SchemaService: DefaultSchema,
RulesService: [emDash, ellipsis],
ShortCutsService: {},
EnableTrackChangeService: { enabled: false },
diff --git a/wax-prosemirror-components/package.json b/wax-prosemirror-components/package.json
index 6f568216d..c2479337e 100644
--- a/wax-prosemirror-components/package.json
+++ b/wax-prosemirror-components/package.json
@@ -4,7 +4,7 @@
"version": "0.0.27",
"description": "Wax prosemirror UI components",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
index 558207fec..5d1b1465f 100644
--- a/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
+++ b/wax-prosemirror-components/src/components/specialCharacters/SpecialCharactersComponent.js
@@ -107,6 +107,8 @@ const SpecialCharactersComponent = ({ close }) => {
const searchRef = useRef(null);
const { activeView } = useContext(WaxContext);
const [searchValue, setSearchValue] = useState('');
+ const [isFirstRun, setFirstRun] = useState(true);
+
const [specialCharactersList, setSpecialCharactersList] = useState(
CharactersList,
);
@@ -130,12 +132,21 @@ const SpecialCharactersComponent = ({ close }) => {
useEffect(() => {
delayedSearch();
+ if (isFirstRun) {
+ setTimeout(() => {
+ searchRef.current.focus();
+ setFirstRun(false);
+ });
+ }
}, [searchValue, delayedSearch]);
const insertCharacter = character => {
const { state, dispatch } = activeView;
const { from, to } = state.selection;
dispatch(state.tr.insertText(character.unicode, from, to));
+ setTimeout(() => {
+ activeView.focus();
+ });
};
const renderList = () => {
diff --git a/wax-prosemirror-core/package.json b/wax-prosemirror-core/package.json
index 2d31ba07e..7d7f3ccdd 100644
--- a/wax-prosemirror-core/package.json
+++ b/wax-prosemirror-core/package.json
@@ -4,7 +4,7 @@
"version": "0.0.27",
"description": "Wax prosemirror core",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-plugins/package.json b/wax-prosemirror-plugins/package.json
index 7532121bc..023660503 100644
--- a/wax-prosemirror-plugins/package.json
+++ b/wax-prosemirror-plugins/package.json
@@ -4,7 +4,7 @@
"version": "0.0.27",
"description": "Wax prosemirror plugins",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-schema/package.json b/wax-prosemirror-schema/package.json
index 18538d331..63281583b 100644
--- a/wax-prosemirror-schema/package.json
+++ b/wax-prosemirror-schema/package.json
@@ -4,7 +4,7 @@
"version": "0.0.27",
"description": "Wax prosemirror schema",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-services/package.json b/wax-prosemirror-services/package.json
index 7bbc2d449..688d5f680 100644
--- a/wax-prosemirror-services/package.json
+++ b/wax-prosemirror-services/package.json
@@ -4,7 +4,7 @@
"version": "0.0.27",
"description": "Wax prosemirror services",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
diff --git a/wax-prosemirror-utilities/package.json b/wax-prosemirror-utilities/package.json
index e1e7084e8..519d2385d 100644
--- a/wax-prosemirror-utilities/package.json
+++ b/wax-prosemirror-utilities/package.json
@@ -4,7 +4,7 @@
"version": "0.0.27",
"description": "Wax prosemirror utilities",
"license": "MIT",
- "main": "dist/index.js",
+ "main": "index.js",
"files": [
"dist"
],
--
GitLab