From 6f8ed2215c015b2aabc334d81dc0b3d877e1aadb Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Sun, 14 Mar 2021 11:42:39 +0200
Subject: [PATCH] initial shortCuts list
---
.../EditorInfo/EditorShortCutsTool.js | 58 ++++++++++++++++++-
.../findAndReplace/FindAndReplaceTool.js | 16 +++++
2 files changed, 72 insertions(+), 2 deletions(-)
diff --git a/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js b/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
index f163ed26e..37703d25f 100644
--- a/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
+++ b/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
@@ -49,7 +49,28 @@ const CounterInfoComponent = styled.div`
display: flex;
flex-direction: column;
position: fixed;
- right: 31px;
+ 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 }) => {
@@ -65,7 +86,40 @@ const EditorShortCutsTool = ({ view: { state }, item }) => {
useOnClickOutside(ref, () => setIsOpen(false));
const renderList = () => {
- return <span>hii</span>;
+ return (
+ <ShortCutsContainer>
+ <ShortCutsList>
+ <li>
+ <span>Ctrl + s </span> : Save
+ </li>
+ <li>
+ <span>Ctrl + z </span> : Undo
+ </li>
+ <li>
+ <span>Ctrl + Shift + z </span> : Redo
+ </li>
+
+ <li>
+ <span>Shift+Ctrl+8 </span> : Bullet List
+ </li>
+ <li>
+ <span>Shift+Ctrl+9 </span> : Ordered List
+ </li>
+ <li>
+ <span>Ctrl-] </span> : Indent list item
+ </li>
+ <li>
+ <span>Ctrl-[ </span> : Lift list item
+ </li>
+ <li>
+ <span>Ctrl or Shift + Enter </span> : Soft break
+ </li>
+ <li>
+ <span>Ctrl + f </span> : Search and replace
+ </li>
+ </ShortCutsList>
+ </ShortCutsContainer>
+ );
};
const MenuButtonComponent = useMemo(
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
index 0475fad67..395bcb2c1 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js
@@ -4,6 +4,7 @@ import React, {
useMemo,
useState,
useLayoutEffect,
+ useEffect,
} from 'react';
import styled from 'styled-components';
@@ -44,6 +45,21 @@ const FindAndReplaceTool = ({ view = {}, item }) => {
});
if (!isEditable) isDisabled = true;
+ const triggerFind = e => {
+ if ((e.key === 70 || e.keyCode === 70) && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault();
+ setIsOpen(true);
+ return false;
+ }
+ return true;
+ };
+
+ useEffect(() => {
+ document.addEventListener('keydown', triggerFind);
+
+ return () => document.removeEventListener('keydown', triggerFind);
+ }, []);
+
useLayoutEffect(() => {
setStyle(styles);
if (!dropElement.current) return;
--
GitLab