Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-16 11:47:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve editor for readonly mode

Browse Source
This commit is contained in:
thecodrr
2022-07-27 15:15:25 +05:00
parent 37ebfa9e20
commit 1f057c6e88
6 changed files with 88 additions and 38805 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38790
packages/editor/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
packages/editor/package.json
View File

@@ -62,16 +62,15 @@
"@types/rebass__forms": "^4.0.6",
"@types/tinycolor2": "^1.4.3",
"isomorphic-fetch": "^3.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"ts-node": "^10.8.1",
"typescript": "^4.7.4",
"typescript-plugin-css-modules": "^3.4.0",
"web-vitals": "^2.1.4"
},
"peerDependencies": {
"framer-motion": "^4.1.17"
"framer-motion": "^4.1.17",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"scripts": {
"build": "./scripts/build.sh",

37
packages/editor/src/extensions/code-block/component.tsx
View File

@@ -39,7 +39,7 @@ export function CodeblockComponent(
const preventUpdate = language === languageDefinition.filename;
updateAttributes(
{
language: languageDefinition.filename
language: languageDefinition.filename,
},
{ preventUpdate, addToHistory: false }
);
@@ -52,7 +52,7 @@ export function CodeblockComponent(
sx={{
flexDirection: "column",
borderRadius: "default",
overflow: "hidden"
overflow: "hidden",
}}
>
<Text
@@ -66,7 +66,7 @@ export function CodeblockComponent(
fontFamily: "monospace",
fontSize: "code",
whiteSpace: "pre !important",
tabSize: 1
tabSize: 1,
},
position: "relative",
lineHeight: "20px",
@@ -76,7 +76,7 @@ export function CodeblockComponent(
display: "flex",
px: 2,
pt: 2,
pb: 1
pb: 1,
}}
spellCheck={false}
/>
@@ -87,7 +87,7 @@ export function CodeblockComponent(
bg: "codeBg",
alignItems: "center",
justifyContent: "flex-end",
borderTop: "1px solid var(--codeBorder)"
borderTop: "1px solid var(--codeBorder)",
}}
>
{caretPosition ? (
@@ -100,12 +100,19 @@ export function CodeblockComponent(
) : null}
<Button
variant={"icon"}
sx={{ p: 1, mr: 1, ":hover": { bg: "codeSelection" } }}
sx={{
p: 1,
mr: 1,
opacity: "1 !important",
":hover": { bg: "codeSelection" },
}}
title="Toggle indentation mode"
disabled={!editor.isEditable}
onClick={() => {
if (!editor.isEditable) return;
editor.commands.changeCodeBlockIndentation({
type: indentType === "space" ? "tab" : "space",
amount: indentLength
amount: indentLength,
});
}}
>
@@ -116,12 +123,16 @@ export function CodeblockComponent(
<Button
variant={"icon"}
sx={{
opacity: "1 !important",
p: 1,
mr: 1,
bg: isOpen ? "codeSelection" : "transparent",
":hover": { bg: "codeSelection" }
":hover": { bg: "codeSelection" },
}}
disabled={!editor.isEditable}
onClick={() => {
if (!editor.isEditable) return;
setIsOpen(true);
}}
title="Change language"
@@ -156,7 +167,7 @@ export function CodeblockComponent(
align: "end",
isTargetAbsolute: true,
location: "top",
yOffset: 5
yOffset: 5,
}}
title="Change code block language"
>
@@ -193,7 +204,7 @@ function LanguageSelector(props: LanguageSelectorProps) {
height: 200,
width: ["auto", 300],
overflowY: "auto",
bg: "background"
bg: "background",
}}
>
<Input
@@ -209,7 +220,7 @@ function LanguageSelector(props: LanguageSelectorProps) {
bg: "background",
mx: 2,
p: "7px",
zIndex: 999
zIndex: 999,
}}
onChange={(e) => {
if (!e.target.value) return setLanguages(Languages);
@@ -230,7 +241,7 @@ function LanguageSelector(props: LanguageSelectorProps) {
sx={{
flexDirection: "column",
pt: 1,
mt: 1
mt: 1,
}}
>
{languages.map((lang) => (
@@ -242,7 +253,7 @@ function LanguageSelector(props: LanguageSelectorProps) {
py: 1,
display: "flex",
justifyContent: "space-between",
alignItems: "center"
alignItems: "center",
}}
onClick={() => onLanguageSelected(lang.filename)}
>

5
packages/editor/src/extensions/embed/component.tsx
View File

@@ -43,9 +43,10 @@ export function EmbedComponent(
);
}}
>
<Flex
<Box
width={"100%"}
sx={{
display: editor.isEditable ? "flex" : "none",
position: "relative",
justifyContent: "end",
p: "small",
@@ -89,7 +90,7 @@ export function EmbedComponent(
</Flex>
)}
</DesktopOnly>
</Flex>
</Box>
<Box
as="iframe"
ref={embedRef}

42
packages/editor/src/extensions/task-item/component.tsx
View File

@@ -65,26 +65,28 @@ export function TaskItemComponent(
},
}}
>
<Icon
className="dragHandle"
draggable="true"
// NOTE: Turning this off somehow makes drag/drop stop working
// properly on touch devices.
// contentEditable={false}
data-drag-handle
path={Icons.dragHandle}
sx={{
opacity: [1, 1, 0],
alignSelf: "start",
mr: 2,
bg: "transparent",
cursor: "grab",
".icon:hover path": {
fill: "var(--checked) !important",
},
}}
size={isMobile ? 24 : 20}
/>
{editor.isEditable && (
<Icon
className="dragHandle"
draggable="true"
// NOTE: Turning this off somehow makes drag/drop stop working
// properly on touch devices.
// contentEditable={false}
data-drag-handle
path={Icons.dragHandle}
sx={{
opacity: [1, 1, 0],
alignSelf: "start",
mr: 2,
bg: "transparent",
cursor: "grab",
".icon:hover path": {
fill: "var(--checked) !important",
},
}}
size={isMobile ? 24 : 20}
/>
)}
<Icon
path={checked ? Icons.check : ""}
stroke="1px"

12
packages/editor/src/extensions/task-list/component.tsx
View File

@@ -136,7 +136,13 @@ export function TaskListComponent(
readOnly={!editor.isEditable}
value={title || ""}
variant={"clean"}
sx={{ p: 0, px: 2, zIndex: 1, color: "fontTertiary" }}
sx={{
p: 0,
px: 2,
zIndex: 1,
color: "fontTertiary",
fontSize: "body",
}}
placeholder="Untitled"
onChange={(e) => {
updateAttributes(
@@ -163,12 +169,12 @@ export function TaskListComponent(
paddingInlineStart: 0,
marginBlockStart: isNested ? 10 : 0,
marginBlockEnd: 0,
marginLeft: isNested ? -35 : 0,
marginLeft: isNested ? (editor.isEditable ? -35 : -10) : 0,
},
li: {
listStyleType: "none",
position: "relative",
marginBottom: [2, "7px"],
marginBottom: isNested ? [1, "3px"] : [2, "7px"],
},
}}
/>