Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
W
wax-prosemirror
Manage
Activity
Members
Labels
Plan
Issues
34
Issue boards
Milestones
Iterations
Wiki
Requirements
Code
Merge requests
2
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Container Registry
Operate
Environments
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
wax
wax-prosemirror
Merge requests
!260
Editoria layout
Code
Review changes
Check out branch
Download
Patches
Plain diff
Merged
Editoria layout
editoria-layout
into
master
Overview
0
Commits
12
Pipelines
0
Changes
22
Merged
Christos
requested to merge
editoria-layout
into
master
4 years ago
Overview
0
Commits
12
Pipelines
0
Changes
11
Expand
0
0
Merge request reports
Compare
version 1
version 1
e84f51a8
4 years ago
master (base)
and
latest version
latest version
6f8ed221
12 commits,
4 years ago
version 1
e84f51a8
9 commits,
4 years ago
Show latest version
11 files
+
238
−
12
Inline
Compare changes
Side-by-side
Inline
Show whitespace changes
Show one file at a time
Files
11
Search (e.g. *.vue) (Ctrl+P)
wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
0 → 100644
+
159
−
0
Options
import
React
,
{
useMemo
,
useState
,
useRef
,
useContext
,
useEffect
}
from
'
react
'
;
import
styled
from
'
styled-components
'
;
import
{
grid
,
th
}
from
'
@pubsweet/ui-toolkit
'
;
import
{
v4
as
uuidv4
}
from
'
uuid
'
;
import
{
WaxContext
}
from
'
wax-prosemirror-core
'
;
import
MenuButton
from
'
../../ui/buttons/MenuButton
'
;
import
useOnClickOutside
from
'
../../helpers/useOnClickOutside
'
;
const
Wrapper
=
styled
.
div
`
font-size: 0;
position: relative;
z-index: 2;
button {
border:
${
props
=>
props
.
active
?
`1px solid #535E76`
:
`1px solid #D8DAE0`
}
;
&:hover {
background:
${
props
=>
(
props
.
active
?
`#535E76`
:
'
#D8DAE0
'
)}
;
}
}
&:before {
border-bottom:
${
props
=>
props
.
active
?
`8px solid #535E76`
:
`8px solid #D8DAE0`
}
;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
bottom: 26px;
content: '';
height: 0;
left: 48%;
position: relative;
width: 0;
}
`
;
const
DropWrapper
=
styled
.
div
`
background: white;
margin-top:
${
grid
(
1
)}
;
position: absolute;
top: 32px;
width: max-content;
`
;
const
CounterInfoComponent
=
styled
.
div
`
background: white;
border: 1px solid
${
th
(
'
colorPrimary
'
)}
;
bottom: 45px;
display: flex;
flex-direction: column;
position: fixed;
right: 136px;
`
;
const
ShortCutsContainer
=
styled
.
div
`
font-size: 14px;
height: 240px;
padding: 4px;
width: 200px;
`
;
const
ShortCutsList
=
styled
.
ul
`
list-style-type: none;
margin: 0;
padding: 0;
li {
padding-bottom: 6px;
span {
color: #535e76;
}
}
`
;
const
EditorShortCutsTool
=
({
view
:
{
state
},
item
})
=>
{
const
{
title
}
=
item
;
const
[
isOpen
,
setIsOpen
]
=
useState
(
false
);
const
ref
=
useRef
();
const
{
activeView
,
view
:
{
main
},
}
=
useContext
(
WaxContext
);
useOnClickOutside
(
ref
,
()
=>
setIsOpen
(
false
));
const
renderList
=
()
=>
{
return
(
<
ShortCutsContainer
>
<
ShortCutsList
>
<
li
>
<
span
>
Ctrl
+
s
<
/span> : Sav
e
<
/li
>
<
li
>
<
span
>
Ctrl
+
z
<
/span> : Und
o
<
/li
>
<
li
>
<
span
>
Ctrl
+
Shift
+
z
<
/span> : Red
o
<
/li
>
<
li
>
<
span
>
Shift
+
Ctrl
+
8
<
/span> : Bullet Lis
t
<
/li
>
<
li
>
<
span
>
Shift
+
Ctrl
+
9
<
/span> : Ordered Lis
t
<
/li
>
<
li
>
<
span
>
Ctrl
-
]
<
/span> : Indent list ite
m
<
/li
>
<
li
>
<
span
>
Ctrl
-
[
<
/span> : Lift list ite
m
<
/li
>
<
li
>
<
span
>
Ctrl
or
Shift
+
Enter
<
/span> : Soft brea
k
<
/li
>
<
li
>
<
span
>
Ctrl
+
f
<
/span> : Search and replac
e
<
/li
>
<
/ShortCutsList
>
<
/ShortCutsContainer
>
);
};
const
MenuButtonComponent
=
useMemo
(
()
=>
(
<
Wrapper
active
=
{
isOpen
}
ref
=
{
ref
}
>
<
MenuButton
active
=
{
isOpen
}
disabled
=
{
false
}
label
=
"
short cuts
"
onMouseDown
=
{()
=>
{
setIsOpen
(
!
isOpen
);
}}
title
=
{
title
}
/
>
{
isOpen
&&
(
<
DropWrapper
>
<
CounterInfoComponent
close
=
{()
=>
{
setIsOpen
(
false
);
}}
item
=
{
item
}
key
=
{
uuidv4
()}
view
=
{
state
}
>
{
renderList
()}
<
/CounterInfoComponent
>
<
/DropWrapper
>
)}
<
/Wrapper
>
),
[
isOpen
],
);
return
MenuButtonComponent
;
};
export
default
EditorShortCutsTool
;