diff --git a/frontend/appflowy_tauri/package.json b/frontend/appflowy_tauri/package.json
index bfe25ad27f..a6befd4733 100644
--- a/frontend/appflowy_tauri/package.json
+++ b/frontend/appflowy_tauri/package.json
@@ -27,12 +27,14 @@
"@tauri-apps/api": "^1.2.0",
"dayjs": "^1.11.7",
"emoji-mart": "^5.5.2",
+ "emoji-regex": "^10.2.1",
"events": "^3.3.0",
"google-protobuf": "^3.21.2",
"i18next": "^22.4.10",
"i18next-browser-languagedetector": "^7.0.1",
"is-hotkey": "^0.2.0",
"jest": "^29.5.0",
+ "katex": "^0.16.7",
"nanoid": "^4.0.0",
"prismjs": "^1.29.0",
"protoc-gen-ts": "^0.8.5",
@@ -44,6 +46,7 @@
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-i18next": "^12.2.0",
+ "react-katex": "^3.0.1",
"react-redux": "^8.0.5",
"react-router-dom": "^6.8.0",
"react18-input-otp": "^1.1.2",
@@ -60,12 +63,14 @@
"@tauri-apps/cli": "^1.2.2",
"@types/google-protobuf": "^3.15.6",
"@types/is-hotkey": "^0.1.7",
+ "@types/katex": "^0.16.0",
"@types/node": "^18.7.10",
"@types/prismjs": "^1.26.0",
"@types/quill": "^2.0.10",
"@types/react": "^18.0.15",
"@types/react-beautiful-dnd": "^13.1.3",
"@types/react-dom": "^18.0.6",
+ "@types/react-katex": "^3.0.0",
"@types/utf8": "^3.0.1",
"@types/uuid": "^9.0.1",
"@typescript-eslint/eslint-plugin": "^5.51.0",
diff --git a/frontend/appflowy_tauri/pnpm-lock.yaml b/frontend/appflowy_tauri/pnpm-lock.yaml
index d725aacd21..043a661188 100644
--- a/frontend/appflowy_tauri/pnpm-lock.yaml
+++ b/frontend/appflowy_tauri/pnpm-lock.yaml
@@ -37,6 +37,9 @@ dependencies:
emoji-mart:
specifier: ^5.5.2
version: 5.5.2
+ emoji-regex:
+ specifier: ^10.2.1
+ version: 10.2.1
events:
specifier: ^3.3.0
version: 3.3.0
@@ -55,6 +58,9 @@ dependencies:
jest:
specifier: ^29.5.0
version: 29.5.0(@types/node@18.16.9)
+ katex:
+ specifier: ^0.16.7
+ version: 0.16.7
nanoid:
specifier: ^4.0.0
version: 4.0.2
@@ -88,6 +94,9 @@ dependencies:
react-i18next:
specifier: ^12.2.0
version: 12.2.2(i18next@22.4.15)(react-dom@18.2.0)(react@18.2.0)
+ react-katex:
+ specifier: ^3.0.1
+ version: 3.0.1(prop-types@15.8.1)(react@18.2.0)
react-redux:
specifier: ^8.0.5
version: 8.0.5(@types/react-dom@18.2.4)(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
@@ -132,6 +141,9 @@ devDependencies:
'@types/is-hotkey':
specifier: ^0.1.7
version: 0.1.7
+ '@types/katex':
+ specifier: ^0.16.0
+ version: 0.16.0
'@types/node':
specifier: ^18.7.10
version: 18.16.9
@@ -150,6 +162,9 @@ devDependencies:
'@types/react-dom':
specifier: ^18.0.6
version: 18.2.4
+ '@types/react-katex':
+ specifier: ^3.0.0
+ version: 3.0.0
'@types/utf8':
specifier: ^3.0.1
version: 3.0.1
@@ -1632,6 +1647,10 @@ packages:
resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
dev: true
+ /@types/katex@0.16.0:
+ resolution: {integrity: sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw==}
+ dev: true
+
/@types/lodash.memoize@4.1.7:
resolution: {integrity: sha512-lGN7WeO4vO6sICVpf041Q7BX/9k1Y24Zo3FY0aUezr1QlKznpjzsDk3T3wvH8ofYzoK0QupN9TWcFAFZlyPwQQ==}
dependencies:
@@ -1684,6 +1703,12 @@ packages:
'@types/react': 17.0.59
dev: false
+ /@types/react-katex@3.0.0:
+ resolution: {integrity: sha512-AiHHXh71a2M7Z6z1wj6iA23SkiRF9r0neHUdu8zjU/cT3MyLxDefYHbcceKhV/gjDEZgF3YaiNHyPNtoGUjPvg==}
+ dependencies:
+ '@types/react': 18.2.6
+ dev: true
+
/@types/react-redux@7.1.25:
resolution: {integrity: sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==}
dependencies:
@@ -2280,6 +2305,11 @@ packages:
engines: {node: '>= 6'}
dev: true
+ /commander@8.3.0:
+ resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+ engines: {node: '>= 12'}
+ dev: false
+
/compute-scroll-into-view@1.0.20:
resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
dev: false
@@ -2437,6 +2467,10 @@ packages:
resolution: {integrity: sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==}
dev: false
+ /emoji-regex@10.2.1:
+ resolution: {integrity: sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==}
+ dev: false
+
/emoji-regex@8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
dev: false
@@ -3799,6 +3833,13 @@ packages:
object.assign: 4.1.4
dev: true
+ /katex@0.16.7:
+ resolution: {integrity: sha512-Xk9C6oGKRwJTfqfIbtr0Kes9OSv6IFsuhFGc7tW4urlpMJtuh+7YhzU6YEG9n8gmWKcMAFzkp7nr+r69kV0zrA==}
+ hasBin: true
+ dependencies:
+ commander: 8.3.0
+ dev: false
+
/kleur@3.0.3:
resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
engines: {node: '>=6'}
@@ -4483,6 +4524,17 @@ packages:
resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
dev: false
+ /react-katex@3.0.1(prop-types@15.8.1)(react@18.2.0):
+ resolution: {integrity: sha512-wIUW1fU5dHlkKvq4POfDkHruQsYp3fM8xNb/jnc8dnQ+nNCnaj0sx5pw7E6UyuEdLRyFKK0HZjmXBo+AtXXy0A==}
+ peerDependencies:
+ prop-types: ^15.8.1
+ react: '>=15.3.2 <=18'
+ dependencies:
+ katex: 0.16.7
+ prop-types: 15.8.1
+ react: 18.2.0
+ dev: false
+
/react-redux@7.2.9(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==}
peerDependencies:
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockRangeSelection.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockRangeSelection.hooks.ts
index 68aa2cd356..0ff2256b6d 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockRangeSelection.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSelection/BlockRangeSelection.hooks.ts
@@ -11,8 +11,13 @@ import {
import { useRangeKeyDown } from '$app/components/document/BlockSelection/RangeKeyDown.hooks';
import { useSubscribeDocument } from '$app/components/document/_shared/SubscribeDoc.hooks';
import { useSubscribeRanges } from '$app/components/document/_shared/SubscribeSelection.hooks';
+import { isApple } from '$app/utils/env';
+
+const onFrameTime = 1000 / 60;
export function useBlockRangeSelection(container: HTMLDivElement) {
+ const timeStampRef = useRef(0);
+
const dispatch = useAppDispatch();
const onKeyDown = useRangeKeyDown();
const { docId } = useSubscribeDocument();
@@ -36,10 +41,12 @@ export function useBlockRangeSelection(container: HTMLDivElement) {
useEffect(() => {
if (!range) return;
const { anchor, focus } = range;
+
if (!anchor || !focus) {
container.classList.remove('caret-transparent');
return;
}
+
// if the focus block is different from the anchor block, we need to set the caret transparent
if (focus.id !== anchor.id) {
container.classList.add('caret-transparent');
@@ -50,18 +57,21 @@ export function useBlockRangeSelection(container: HTMLDivElement) {
useEffect(() => {
const anchor = anchorRef.current;
+
if (!anchor || !focus) return;
const selection = window.getSelection();
+
if (!selection) return;
// update focus point
dispatch(
rangeActions.setFocusPoint({
- ...focus,
+ focusPoint: focus,
docId,
})
);
const focused = isFocused(focus.id);
+
// if the focus block is not focused, we need to set the cursor position
if (!focused) {
// if the focus block is the same as the anchor block, we just update the anchor's range
@@ -70,14 +80,17 @@ export function useBlockRangeSelection(container: HTMLDivElement) {
anchor.point.x - container.scrollLeft,
anchor.point.y - container.scrollTop
);
+
if (!range) return;
const selection = window.getSelection();
+
selection?.removeAllRanges();
selection?.addRange(range);
return;
}
const node = getNodeTextBoxByBlockId(focus.id);
+
if (!node) return;
// if the selection is forward, we set the cursor position to the start of the focus block
if (isForward) {
@@ -89,15 +102,33 @@ export function useBlockRangeSelection(container: HTMLDivElement) {
}
}, [container, dispatch, docId, focus, isForward]);
- const handleDragStart = useCallback(
+ const handleDragEnd = useCallback(() => {
+ timeStampRef.current = Date.now();
+ if (!isDragging) return;
+ setFocus(null);
+ anchorRef.current = null;
+ dispatch(
+ rangeActions.setDragging({
+ isDragging: false,
+ docId,
+ })
+ );
+ }, [docId, dispatch, isDragging]);
+
+ const handleMouseDown = useCallback(
(e: MouseEvent) => {
- setForward(true);
+ const isTapToClick = isApple() && timeStampRef.current > 0 && Date.now() - timeStampRef.current < onFrameTime;
+
// skip if the target is not a block
const blockId = getBlockIdByPoint(e.target as HTMLElement);
+
if (!blockId) {
dispatch(rangeActions.initialState(docId));
return;
}
+
+ setForward(true);
+
dispatch(rangeActions.clearRanges({ docId, exclude: blockId }));
const startX = e.clientX + container.scrollLeft;
const startY = e.clientY + container.scrollTop;
@@ -113,18 +144,25 @@ export function useBlockRangeSelection(container: HTMLDivElement) {
anchorRef.current = {
...anchor,
};
+
// set the anchor point and focus point
- dispatch(rangeActions.setAnchorPoint({ ...anchor, docId }));
- dispatch(rangeActions.setFocusPoint({ ...anchor, docId }));
+ dispatch(rangeActions.setAnchorPoint({ docId, anchorPoint: anchor }));
+ dispatch(rangeActions.setFocusPoint({ docId, focusPoint: anchor }));
+
+ // This is a workaround for a bug in Safari where the mouseup event is not fired
+ if (isTapToClick) {
+ handleDragEnd();
+ return;
+ }
+
dispatch(
rangeActions.setDragging({
isDragging: true,
docId,
})
);
- return;
},
- [container.scrollLeft, container.scrollTop, dispatch, docId]
+ [container.scrollLeft, container.scrollTop, dispatch, docId, handleDragEnd]
);
const handleDraging = useCallback(
@@ -133,12 +171,14 @@ export function useBlockRangeSelection(container: HTMLDivElement) {
// skip if the target is not a block
const blockId = getBlockIdByPoint(e.target as HTMLElement);
+
if (!blockId) {
return;
}
const endX = e.clientX + container.scrollLeft;
const endY = e.clientY + container.scrollTop;
+
// set the focus point
setFocus({
id: blockId,
@@ -149,42 +189,35 @@ export function useBlockRangeSelection(container: HTMLDivElement) {
});
// set forward
const anchorId = anchorRef.current.id;
+
if (anchorId === blockId) {
const startX = anchorRef.current.point.x;
+
setForward(startX < endX);
return;
}
+
const startY = anchorRef.current.point.y;
+
setForward(startY < endY);
},
[container.scrollLeft, container.scrollTop, isDragging]
);
- const handleDragEnd = useCallback(() => {
- if (!isDragging) return;
- setFocus(null);
- anchorRef.current = null;
- dispatch(
- rangeActions.setDragging({
- isDragging: false,
- docId,
- })
- );
- }, [docId, dispatch, isDragging]);
-
useEffect(() => {
- document.addEventListener('mousedown', handleDragStart);
+ document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mousemove', handleDraging);
document.addEventListener('mouseup', handleDragEnd);
+
container.addEventListener('keydown', onKeyDown, true);
return () => {
- document.removeEventListener('mousedown', handleDragStart);
+ document.removeEventListener('mousedown', handleMouseDown);
document.removeEventListener('mousemove', handleDraging);
document.removeEventListener('mouseup', handleDragEnd);
container.removeEventListener('keydown', onKeyDown, true);
};
- }, [handleDragStart, handleDragEnd, handleDraging, container, onKeyDown]);
+ }, [handleMouseDown, handleDragEnd, handleDraging, container, onKeyDown]);
return null;
}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/index.tsx
index 74e0e74047..50569b6413 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/index.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/BlockSideToolbar/index.tsx
@@ -10,6 +10,7 @@ import ToolbarButton from './ToolbarButton';
import { rectSelectionActions } from '$app_reducers/document/slice';
import { addBlockBelowClickThunk } from '$app_reducers/document/async-actions/menu';
import { useSubscribeDocument } from '$app/components/document/_shared/SubscribeDoc.hooks';
+import { RANGE_NAME, RECT_RANGE_NAME } from '$app/constants/document/name';
export default function BlockSideToolbar({ container }: { container: HTMLDivElement }) {
const dispatch = useAppDispatch();
@@ -17,7 +18,7 @@ export default function BlockSideToolbar({ container }: { container: HTMLDivElem
const { nodeId, style, ref } = useBlockSideToolbar({ container });
const isDragging = useAppSelector(
- (state) => state.documentRange[docId]?.isDragging || state.documentRectSelection[docId]?.isDragging
+ (state) => state[RANGE_NAME][docId]?.isDragging || state[RECT_RANGE_NAME][docId]?.isDragging
);
const { handleOpen, ...popoverProps } = usePopover();
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/Overlay/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/Overlay/index.tsx
index b1bd9a1183..e9c51f76c7 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/Overlay/index.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/Overlay/index.tsx
@@ -7,6 +7,7 @@ import { useCopy } from '$app/components/document/_shared/CopyPasteHooks/useCopy
import { usePaste } from '$app/components/document/_shared/CopyPasteHooks/usePaste';
import LinkEditPopover from '$app/components/document/_shared/TextLink/LinkEditPopover';
import { useUndoRedo } from '$app/components/document/_shared/UndoHooks/useUndoRedo';
+import TemporaryPopover from '$app/components/document/_shared/TemporaryInput/TemporaryPopover';
export default function Overlay({ container }: { container: HTMLDivElement }) {
useCopy(container);
@@ -19,6 +20,7 @@ export default function Overlay({ container }: { container: HTMLDivElement }) {
+
);
}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/config.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/config.ts
new file mode 100644
index 0000000000..cfdfe64b71
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/config.ts
@@ -0,0 +1,31 @@
+import { TextAction, TextActionMenuProps } from '$app/interfaces/document';
+
+export const defaultTextActionItems = [
+ TextAction.Turn,
+ TextAction.Link,
+ TextAction.Bold,
+ TextAction.Italic,
+ TextAction.Underline,
+ TextAction.Strikethrough,
+ TextAction.Code,
+ TextAction.Equation,
+];
+const groupKeys = {
+ comment: [],
+ format: [
+ TextAction.Bold,
+ TextAction.Italic,
+ TextAction.Underline,
+ TextAction.Strikethrough,
+ TextAction.Code,
+ TextAction.Equation,
+ ],
+ link: [TextAction.Link],
+ turn: [TextAction.Turn],
+};
+
+export const multiLineTextActionProps: TextActionMenuProps = {
+ customItems: [TextAction.Bold, TextAction.Italic, TextAction.Underline, TextAction.Strikethrough, TextAction.Code],
+};
+export const multiLineTextActionGroups = [groupKeys.format];
+export const textActionGroups = [groupKeys.turn, groupKeys.format, groupKeys.link];
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/index.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/index.hooks.ts
index 69919662ce..f432643d35 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/index.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/index.hooks.ts
@@ -1,6 +1,5 @@
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { calcToolbarPosition } from '$app/utils/document/toolbar';
-import { useAppSelector } from '$app/stores/store';
import { getNode } from '$app/utils/document/node';
import { debounce } from '$app/utils/tool';
import { useSubscribeCaret } from '$app/components/document/_shared/SubscribeSelection.hooks';
@@ -15,9 +14,11 @@ export function useMenuStyle(container: HTMLDivElement) {
const reCalculatePosition = useCallback(() => {
const el = ref.current;
+
if (!el || !id) return;
const node = getNode(id);
+
if (!node) return;
const position = calcToolbarPosition(el, node, container);
@@ -50,6 +51,7 @@ export function useMenuStyle(container: HTMLDivElement) {
setIsScrolling(true);
debounceScrollEnd();
};
+
container.addEventListener('scroll', handleScroll);
return () => {
debounceScrollEnd.cancel();
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/index.tsx
index 62078a1472..44a8581349 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/index.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/index.tsx
@@ -27,10 +27,12 @@ const TextActionComponent = ({ container }: { container: HTMLDivElement }) => {
);
};
+
const TextActionMenu = ({ container }: { container: HTMLDivElement }) => {
const range = useSubscribeRanges();
const canShow = useMemo(() => {
const { isDragging, focus, anchor, ranges, caret } = range;
+
// don't show if dragging
if (isDragging) return false;
// don't show if no focus or anchor
@@ -39,9 +41,10 @@ const TextActionMenu = ({ container }: { container: HTMLDivElement }) => {
// show toolbar if range has multiple nodes
if (!isSameLine) return true;
- const caretRange = ranges[caret.id];
- // don't show if no caret range
+ const caretRange = ranges?.[caret.id];
+
if (!caretRange) return false;
+
// show toolbar if range is not collapsed
return caretRange.length > 0;
}, [range]);
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/FormatButton.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/FormatButton.tsx
index 6c22e56c20..2c80cf31c5 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/FormatButton.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/FormatButton.tsx
@@ -1,37 +1,36 @@
import IconButton from '@mui/material/IconButton';
-import FormatIcon from './FormatIcon';
-import React, { useCallback, useEffect, useMemo, useContext } from 'react';
-import { TextAction } from '$app/interfaces/document';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { TemporaryType, TextAction } from '$app/interfaces/document';
import MenuTooltip from '$app/components/document/TextActionMenu/menu/MenuTooltip';
import { getFormatActiveThunk, toggleFormatThunk } from '$app_reducers/document/async-actions/format';
import { useAppDispatch, useAppSelector } from '$app/stores/store';
-import { DocumentControllerContext } from '$app/stores/effects/document/document_controller';
import { useSubscribeNode } from '$app/components/document/_shared/SubscribeNode.hooks';
import { newLinkThunk } from '$app_reducers/document/async-actions/link';
import { useSubscribeDocument } from '$app/components/document/_shared/SubscribeDoc.hooks';
+import { RANGE_NAME } from '$app/constants/document/name';
+import { createTemporary } from '$app_reducers/document/async-actions/temporary';
+import {
+ CodeOutlined,
+ FormatBold,
+ FormatItalic,
+ FormatUnderlined,
+ Functions,
+ StrikethroughSOutlined,
+} from '@mui/icons-material';
+import LinkIcon from '@mui/icons-material/AddLink';
+
+export const iconSize = { width: 18, height: 18 };
const FormatButton = ({ format, icon }: { format: TextAction; icon: string }) => {
const dispatch = useAppDispatch();
const { docId, controller } = useSubscribeDocument();
- const focusId = useAppSelector((state) => state.documentRange[docId]?.focus?.id || '');
+ const focusId = useAppSelector((state) => state[RANGE_NAME][docId]?.focus?.id || '');
const { node: focusNode } = useSubscribeNode(focusId);
const [isActive, setIsActive] = React.useState(false);
const color = useMemo(() => (isActive ? '#00BCF0' : 'white'), [isActive]);
- const formatTooltips: Record = useMemo(
- () => ({
- [TextAction.Bold]: 'Bold',
- [TextAction.Italic]: 'Italic',
- [TextAction.Underline]: 'Underline',
- [TextAction.Strikethrough]: 'Strike through',
- [TextAction.Code]: 'Mark as Code',
- [TextAction.Link]: 'Add Link',
- }),
- []
- );
-
const isFormatActive = useCallback(async () => {
if (!focusNode) return false;
const { payload: isActive } = await dispatch(
@@ -40,6 +39,7 @@ const FormatButton = ({ format, icon }: { format: TextAction; icon: string }) =>
docId,
})
);
+
return !!isActive;
}, [docId, dispatch, format, focusNode]);
@@ -65,6 +65,34 @@ const FormatButton = ({ format, icon }: { format: TextAction; icon: string }) =>
);
}, [dispatch, docId]);
+ const addTemporaryInput = useCallback(
+ (type: TemporaryType) => {
+ dispatch(createTemporary({ type, docId }));
+ },
+ [dispatch, docId]
+ );
+
+ useEffect(() => {
+ void (async () => {
+ const isActive = await isFormatActive();
+
+ setIsActive(isActive);
+ })();
+ }, [isFormatActive]);
+
+ const formatTooltips: Record = useMemo(
+ () => ({
+ [TextAction.Bold]: 'Bold',
+ [TextAction.Italic]: 'Italic',
+ [TextAction.Underline]: 'Underline',
+ [TextAction.Strikethrough]: 'Strike through',
+ [TextAction.Code]: 'Mark as Code',
+ [TextAction.Link]: 'Add Link',
+ [TextAction.Equation]: 'Create equation',
+ }),
+ []
+ );
+
const formatClick = useCallback(
(format: TextAction) => {
switch (format) {
@@ -76,22 +104,48 @@ const FormatButton = ({ format, icon }: { format: TextAction; icon: string }) =>
return toggleFormat(format);
case TextAction.Link:
return addLink();
+ case TextAction.Equation:
+ return addTemporaryInput(TemporaryType.Equation);
}
},
- [addLink, toggleFormat]
+ [addLink, addTemporaryInput, toggleFormat]
);
- useEffect(() => {
- void (async () => {
- const isActive = await isFormatActive();
- setIsActive(isActive);
- })();
- }, [isFormatActive]);
+ const formatIcon = useMemo(() => {
+ switch (icon) {
+ case TextAction.Bold:
+ return ;
+ case TextAction.Underline:
+ return ;
+ case TextAction.Italic:
+ return ;
+ case TextAction.Code:
+ return ;
+ case TextAction.Strikethrough:
+ return ;
+ case TextAction.Link:
+ return (
+
+ );
+ case TextAction.Equation:
+ return ;
+ default:
+ return null;
+ }
+ }, [icon]);
return (
formatClick(format)}>
-
+ {formatIcon}
);
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/FormatIcon.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/FormatIcon.tsx
deleted file mode 100644
index 89ac65768b..0000000000
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/FormatIcon.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { FormatBold, FormatUnderlined, FormatItalic, CodeOutlined, StrikethroughSOutlined } from '@mui/icons-material';
-import { TextAction } from '$app/interfaces/document';
-import LinkIcon from '@mui/icons-material/AddLink';
-export const iconSize = { width: 18, height: 18 };
-
-export default function FormatIcon({ icon }: { icon: string }) {
- switch (icon) {
- case TextAction.Bold:
- return ;
- case TextAction.Underline:
- return ;
- case TextAction.Italic:
- return ;
- case TextAction.Code:
- return ;
- case TextAction.Strikethrough:
- return ;
- case TextAction.Link:
- return (
-
- );
- default:
- return null;
- }
-}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/index.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/index.hooks.ts
index 48ecb1d8d3..a1098e99c2 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/index.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/index.hooks.ts
@@ -1,14 +1,13 @@
import { useMemo } from 'react';
+import { useSubscribeNode } from '$app/components/document/_shared/SubscribeNode.hooks';
+import { BlockType, TextAction } from '$app/interfaces/document';
+import { useSubscribeRanges } from '$app/components/document/_shared/SubscribeSelection.hooks';
import {
- blockConfig,
- defaultTextActionProps,
+ defaultTextActionItems,
multiLineTextActionGroups,
multiLineTextActionProps,
textActionGroups,
-} from '$app/constants/document/config';
-import { useSubscribeNode } from '$app/components/document/_shared/SubscribeNode.hooks';
-import { TextAction } from '$app/interfaces/document';
-import { useSubscribeRanges } from '$app/components/document/_shared/SubscribeSelection.hooks';
+} from '$app/components/document/TextActionMenu/config';
export function useTextActionMenu() {
const range = useSubscribeRanges();
@@ -22,12 +21,9 @@ export function useTextActionMenu() {
const items = useMemo(() => {
if (!node) return [];
if (isSingleLine) {
- const config = blockConfig[node.type];
- const { customItems, excludeItems } = {
- ...defaultTextActionProps,
- ...config.textActionMenuProps,
- };
- return customItems?.filter((item) => !excludeItems?.includes(item)) || [];
+ const excludeItems = node.type === BlockType.CodeBlock ? [TextAction.Code] : [];
+
+ return defaultTextActionItems?.filter((item) => !excludeItems?.includes(item)) || [];
} else {
return multiLineTextActionProps.customItems || [];
}
@@ -36,6 +32,7 @@ export function useTextActionMenu() {
// the groups have default items, so we need to filter the items if this node has excluded items
const groupItems: TextAction[][] = useMemo(() => {
const groups = node ? textActionGroups : multiLineTextActionGroups;
+
return groups.map((group) => {
return group.filter((item) => items.includes(item));
});
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/index.tsx
index 07ae25151e..64c89ddc1b 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/index.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextActionMenu/menu/index.tsx
@@ -17,6 +17,7 @@ function TextActionMenuList() {
case TextAction.Underline:
case TextAction.Strikethrough:
case TextAction.Code:
+ case TextAction.Equation:
return ;
default:
return null;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/shortchut.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/shortchut.ts
new file mode 100644
index 0000000000..ba0b40b50f
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/shortchut.ts
@@ -0,0 +1,75 @@
+import { Keyboard } from '$app/constants/document/keyboard';
+import { BlockType } from '$app/interfaces/document';
+
+export const turnIntoShortcuts = {
+ [Keyboard.keys.SPACE]: [
+ {
+ type: BlockType.HeadingBlock,
+ /**
+ * # or ## or ###
+ */
+ markdownRegexp: /^(#{1,3})(\s)+$/,
+ },
+ {
+ type: BlockType.TodoListBlock,
+ /**
+ * -[] or -[x] or -[ ] or [] or [x] or [ ]
+ */
+ markdownRegexp: /^((-)?\[(x|\s)?\])(\s)+$/,
+ },
+ {
+ type: BlockType.BulletedListBlock,
+ /**
+ * - or + or *
+ */
+ markdownRegexp: /^(\s*[-+*])(\s)+$/,
+ },
+ {
+ type: BlockType.NumberedListBlock,
+ /**
+ * 1. or 2. or 3.
+ * a. or b. or c.
+ */
+ markdownRegexp: /^(\s*[\d|a-zA-Z]+\.)(\s)+$/,
+ },
+ {
+ type: BlockType.QuoteBlock,
+ /**
+ * " or “ or ”
+ */
+ markdownRegexp: /^("|“|”)(\s)+$/,
+ },
+ {
+ type: BlockType.CalloutBlock,
+ /**
+ * [!TIP] or [!INFO] or [!WARNING] or [!DANGER]
+ */
+ markdownRegexp: /^(\[!)(TIP|INFO|WARNING|DANGER)(\])(\s)+$/,
+ },
+ {
+ type: BlockType.ToggleListBlock,
+ /**
+ * >
+ */
+ markdownRegexp: /^(>)(\s)+$/,
+ },
+ ],
+ [Keyboard.keys.BACK_QUOTE]: [
+ {
+ type: BlockType.CodeBlock,
+ /**
+ * ```
+ */
+ markdownRegexp: /^(```)$/,
+ },
+ ],
+ [Keyboard.keys.REDUCE]: [
+ {
+ type: BlockType.DividerBlock,
+ /**
+ * ---
+ */
+ markdownRegexp: /^(-{3,})$/,
+ },
+ ],
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/useKeyDown.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/useKeyDown.ts
index 753a088894..e2c5d5d514 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/useKeyDown.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/useKeyDown.ts
@@ -1,8 +1,7 @@
-import { useCallback, useContext, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
import { Keyboard } from '$app/constants/document/keyboard';
import isHotkey from 'is-hotkey';
import { useAppDispatch } from '@/appflowy_app/stores/store';
-import { DocumentControllerContext } from '$app/stores/effects/document/document_controller';
import {
enterActionForBlockThunk,
tabActionForBlockThunk,
@@ -90,6 +89,7 @@ export function useKeyDown(id: string) {
const onKeyDown = useCallback(
(e: React.KeyboardEvent) => {
const filteredEvents = interceptEvents.filter((event) => event.canHandle(e));
+
filteredEvents.forEach((event) => {
e.stopPropagation();
event.handler(e);
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/useTurnIntoBlockEvents.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/useTurnIntoBlockEvents.ts
index 73be34d7d7..2ba5417808 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/useTurnIntoBlockEvents.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/useTurnIntoBlockEvents.ts
@@ -1,7 +1,6 @@
-import { useCallback, useContext, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
import { BlockType } from '$app/interfaces/document';
import { useAppDispatch } from '$app/stores/store';
-import { DocumentControllerContext } from '$app/stores/effects/document/document_controller';
import { turnToBlockThunk } from '$app_reducers/document/async-actions';
import { blockConfig } from '$app/constants/document/config';
@@ -10,9 +9,9 @@ import { useRangeRef } from '$app/components/document/_shared/SubscribeSelection
import { getBlock } from '$app/components/document/_shared/SubscribeNode.hooks';
import isHotkey from 'is-hotkey';
import { slashCommandActions } from '$app_reducers/document/slice';
-import { Keyboard } from '$app/constants/document/keyboard';
import { getDeltaText } from '$app/utils/document/delta';
import { useSubscribeDocument } from '$app/components/document/_shared/SubscribeDoc.hooks';
+import { turnIntoShortcuts } from './shortchut';
export function useTurnIntoBlockEvents(id: string) {
const { docId, controller } = useSubscribeDocument();
@@ -22,27 +21,35 @@ export function useTurnIntoBlockEvents(id: string) {
const getFlag = useCallback(() => {
const range = rangeRef.current?.caret;
+
if (!range || range.id !== id) return;
const node = getBlock(docId, id);
const delta = new Delta(node.data.delta || []);
+
return getDeltaText(delta.slice(0, range.index));
}, [docId, id, rangeRef]);
const getDeltaContent = useCallback(() => {
const range = rangeRef.current?.caret;
+
if (!range || range.id !== id) return;
const node = getBlock(docId, id);
const delta = new Delta(node.data.delta || []);
const content = delta.slice(range.index);
+
return new Delta(content);
}, [docId, id, rangeRef]);
const canHandle = useCallback(
- (event: React.KeyboardEvent, type: BlockType, triggerKey: string) => {
+ (event: React.KeyboardEvent, type: BlockType) => {
{
- const config = blockConfig[type];
+ const triggerKey = event.key;
+ const shortcutItem = turnIntoShortcuts[triggerKey]?.find((item) => item.type === type);
+
+ if (!shortcutItem) return false;
+
+ const regex = shortcutItem.markdownRegexp;
- const regex = config.markdownRegexps;
// This error will be thrown if the block type is not in the config, and it will happen in development environment
if (!regex) {
throw new Error(`canHandle: block type ${type} is not supported`);
@@ -53,10 +60,12 @@ export function useTurnIntoBlockEvents(id: string) {
if (!isTrigger) {
return false;
}
+
const flag = getFlag();
+
if (!flag) return false;
- return regex.some((r) => r.test(`${flag}${triggerKey}`));
+ return regex.test(`${flag}${triggerKey}`);
}
},
[getFlag]
@@ -64,6 +73,7 @@ export function useTurnIntoBlockEvents(id: string) {
const getTurnIntoBlockDelta = useCallback(() => {
const content = getDeltaContent();
+
if (!content) return;
return {
delta: content.ops,
@@ -74,8 +84,10 @@ export function useTurnIntoBlockEvents(id: string) {
return {
[BlockType.HeadingBlock]: () => {
const flag = getFlag();
+
if (!flag) return;
const level = flag.match(/#/g)?.length;
+
if (!level || level > 3) return;
return {
level,
@@ -84,6 +96,7 @@ export function useTurnIntoBlockEvents(id: string) {
},
[BlockType.TodoListBlock]: () => {
const flag = getFlag();
+
if (!flag) return;
return {
@@ -97,8 +110,10 @@ export function useTurnIntoBlockEvents(id: string) {
[BlockType.ToggleListBlock]: getTurnIntoBlockDelta,
[BlockType.CalloutBlock]: () => {
const flag = getFlag();
+
if (!flag) return;
const tag = flag.match(/(TIP|INFO|WARNING|DANGER)/g)?.[0];
+
if (!tag) return;
const iconMap: Record = {
TIP: '💡',
@@ -106,6 +121,7 @@ export function useTurnIntoBlockEvents(id: string) {
WARNING: '⚠️',
DANGER: '‼️',
};
+
return {
icon: iconMap[tag],
...getTurnIntoBlockDelta(),
@@ -117,24 +133,24 @@ export function useTurnIntoBlockEvents(id: string) {
const turnIntoBlockEvents = useMemo(() => {
const spaceTriggerEvents = Object.entries(spaceTriggerMap).map(([type, getData]) => {
const blockType = type as BlockType;
- const triggerKey = Keyboard.keys.Space;
return {
- canHandle: (e: React.KeyboardEvent) => canHandle(e, blockType, triggerKey),
+ canHandle: (e: React.KeyboardEvent) => canHandle(e, blockType),
handler: (e: React.KeyboardEvent) => {
e.preventDefault();
if (!controller) return;
const data = getData();
+
if (!data) return;
dispatch(turnToBlockThunk({ id, data, type: blockType, controller }));
},
};
});
+
return [
...spaceTriggerEvents,
{
- canHandle: (e: React.KeyboardEvent) =>
- canHandle(e, BlockType.DividerBlock, Keyboard.keys.Reduce),
+ canHandle: (e: React.KeyboardEvent) => canHandle(e, BlockType.DividerBlock),
handler: (e: React.KeyboardEvent) => {
e.preventDefault();
if (!controller) return;
@@ -153,8 +169,7 @@ export function useTurnIntoBlockEvents(id: string) {
},
},
{
- canHandle: (e: React.KeyboardEvent) =>
- canHandle(e, BlockType.CodeBlock, Keyboard.keys.BackQuote),
+ canHandle: (e: React.KeyboardEvent) => canHandle(e, BlockType.CodeBlock),
handler: (e: React.KeyboardEvent) => {
e.preventDefault();
if (!controller) return;
@@ -163,6 +178,7 @@ export function useTurnIntoBlockEvents(id: string) {
...defaultData,
delta: getDeltaContent()?.ops as Op[],
};
+
dispatch(turnToBlockThunk({ id, data, type: BlockType.CodeBlock, controller }));
},
},
@@ -170,6 +186,7 @@ export function useTurnIntoBlockEvents(id: string) {
// Here custom slash key event for TextBlock
canHandle: (e: React.KeyboardEvent) => {
const flag = getFlag();
+
return isHotkey('/', e) && flag === '';
},
handler: (_: React.KeyboardEvent) => {
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/EditorHooks/useCommonKeyEvents.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/EditorHooks/useCommonKeyEvents.ts
index 32229f3672..84a95e5bd9 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/EditorHooks/useCommonKeyEvents.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/EditorHooks/useCommonKeyEvents.ts
@@ -61,19 +61,18 @@ export function useCommonKeyEvents(id: string) {
{
// handle left arrow key and no other key is pressed
canHandle: (e: React.KeyboardEvent) => {
- return isHotkey(Keyboard.keys.LEFT, e) && caretRef.current?.index === 0 && caretRef.current?.length === 0;
+ return isHotkey(Keyboard.keys.LEFT, e);
},
handler: (e: React.KeyboardEvent) => {
e.preventDefault();
+ e.stopPropagation();
dispatch(leftActionForBlockThunk({ docId, id }));
},
},
{
// handle right arrow key and no other key is pressed
canHandle: (e: React.KeyboardEvent) => {
- const block = getBlock(docId, id);
- const isEndOfBlock = caretRef.current?.index === new Delta(block.data.delta).length();
- return isHotkey(Keyboard.keys.RIGHT, e) && isEndOfBlock && caretRef.current?.length === 0;
+ return isHotkey(Keyboard.keys.RIGHT, e);
},
handler: (e: React.KeyboardEvent) => {
e.preventDefault();
@@ -86,6 +85,7 @@ export function useCommonKeyEvents(id: string) {
handler: (e: React.KeyboardEvent) => {
if (!controller) return;
const format = parseFormat(e);
+
if (!format) return;
dispatch(
toggleFormatThunk({
@@ -97,5 +97,6 @@ export function useCommonKeyEvents(id: string) {
},
];
}, [docId, caretRef, controller, dispatch, focused, id]);
+
return commonKeyEvents;
}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/EditorHooks/useSelection.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/EditorHooks/useSelection.ts
index 793e612196..92517f5720 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/EditorHooks/useSelection.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/EditorHooks/useSelection.ts
@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
import { RangeStatic } from 'quill';
import { useAppDispatch } from '$app/stores/store';
import { rangeActions } from '$app_reducers/document/slice';
@@ -44,7 +44,15 @@ export function useSelection(id: string) {
);
useEffect(() => {
- if (rangeRef.current && rangeRef.current?.isDragging) return;
+ if (rangeRef.current) {
+ const { isDragging, anchor, focus } = rangeRef.current;
+ const mouseDownFocused = anchor?.point.x === focus?.point.x && anchor?.point.y === focus?.point.y;
+
+ if (isDragging && !mouseDownFocused) {
+ return;
+ }
+ }
+
if (!focusCaret) {
setSelection(undefined);
return;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/InlineBlock/InlineContainer.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/InlineBlock/InlineContainer.tsx
new file mode 100644
index 0000000000..2b43e392d0
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/InlineBlock/InlineContainer.tsx
@@ -0,0 +1,144 @@
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
+import './inline.css';
+import { NodeIdContext } from '$app/components/document/_shared/SubscribeNode.hooks';
+import { useFocused, useRangeRef } from '$app/components/document/_shared/SubscribeSelection.hooks';
+import { RangeStaticNoId, TemporaryType } from '$app/interfaces/document';
+import { useAppDispatch } from '$app/stores/store';
+import { createTemporary } from '$app_reducers/document/async-actions/temporary';
+import { useSubscribeDocument } from '$app/components/document/_shared/SubscribeDoc.hooks';
+import KatexMath from '$app/components/document/_shared/KatexMath';
+import { rangeActions } from '$app_reducers/document/slice';
+
+const LEFT_CARET_CLASS = 'inline-block-with-cursor-left';
+const RIGHT_CARET_CLASS = 'inline-block-with-cursor-right';
+
+function InlineContainer({
+ isFirst,
+ isLast,
+ children,
+ getSelection,
+ selectedText,
+ data,
+ temporaryType,
+}: {
+ getSelection: (node: Element) => RangeStaticNoId | null;
+ children: React.ReactNode;
+ formula: string;
+ selectedText: string;
+ isLast: boolean;
+ isFirst: boolean;
+ data: {
+ latex?: string;
+ };
+ temporaryType: TemporaryType;
+}) {
+ const id = useContext(NodeIdContext);
+ const { docId } = useSubscribeDocument();
+ const { focused, focusCaret } = useFocused(id);
+ const rangeRef = useRangeRef();
+ const ref = useRef(null);
+ const dispatch = useAppDispatch();
+ const onClick = useCallback(
+ (node: HTMLSpanElement) => {
+ const selection = getSelection(node);
+
+ if (!selection) return;
+ const temporaryData = temporaryType === TemporaryType.Equation ? { latex: data.latex } : {};
+
+ dispatch(
+ createTemporary({
+ docId,
+ state: {
+ id,
+ selection,
+ selectedText,
+ type: temporaryType,
+ data: temporaryData as { latex: string },
+ },
+ })
+ );
+ },
+ [getSelection, temporaryType, data.latex, dispatch, docId, id, selectedText]
+ );
+
+ const renderNode = useCallback(() => {
+ switch (temporaryType) {
+ case TemporaryType.Equation:
+ return ;
+ default:
+ return null;
+ }
+ }, [data, temporaryType]);
+
+ const resetCaret = useCallback(() => {
+ if (!ref.current) return;
+ ref.current.classList.remove(RIGHT_CARET_CLASS);
+ ref.current.classList.remove(LEFT_CARET_CLASS);
+ }, []);
+
+ useEffect(() => {
+ resetCaret();
+ if (!ref.current) return;
+ if (!focused || !focusCaret || rangeRef.current?.isDragging) {
+ return;
+ }
+
+ const inlineBlockSelection = getSelection(ref.current);
+
+ if (!inlineBlockSelection) return;
+ const distance = inlineBlockSelection.index - focusCaret.index;
+
+ if (distance === 0 && isFirst) {
+ ref.current.classList.add(LEFT_CARET_CLASS);
+ return;
+ }
+
+ if (distance === -1) {
+ ref.current.classList.add(RIGHT_CARET_CLASS);
+ return;
+ }
+ }, [focused, focusCaret, getSelection, resetCaret, isFirst, rangeRef]);
+
+ useEffect(() => {
+ if (!ref.current) return;
+ const onMouseDown = (e: MouseEvent) => {
+ if (e.target === ref.current) {
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ };
+
+ // prevent page scroll when the caret change by mouse down
+ document.addEventListener('mousedown', onMouseDown, true);
+ return () => {
+ document.removeEventListener('mousedown', onMouseDown, true);
+ };
+ }, []);
+
+ if (!selectedText) return null;
+
+ return (
+ onClick(ref.current!)}>
+
+ {children}
+
+
+ {renderNode()}
+
+ {isLast && }
+
+ );
+}
+
+export default InlineContainer;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/InlineBlock/inline.css b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/InlineBlock/inline.css
new file mode 100644
index 0000000000..8106b25450
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/InlineBlock/inline.css
@@ -0,0 +1,31 @@
+.inline-block-with-cursor {
+ position: relative;
+ display: inline-block;
+ padding: 0 2px;
+}
+
+.inline-block-with-cursor-left::before,
+.inline-block-with-cursor-right::after {
+ content: '';
+ position: absolute;
+ top: 0px;
+ width: 1px;
+ height: 100%;
+ background-color: rgb(55, 53, 47);
+ opacity: 0.5;
+ animation: cursor-blink 1s infinite;
+}
+
+.inline-block-with-cursor-left::before {
+ left: -1px;
+}
+
+.inline-block-with-cursor-right::after {
+ right: -1px;
+}
+
+@keyframes cursor-blink {
+ 0% { opacity: 0; }
+ 50% { opacity: 1; }
+ 100% { opacity: 0; }
+}
\ No newline at end of file
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/KatexMath/index.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/KatexMath/index.tsx
new file mode 100644
index 0000000000..c759ad057a
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/KatexMath/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import 'katex/dist/katex.min.css';
+import { BlockMath, InlineMath } from 'react-katex';
+
+function KatexMath({ latex, isInline = false }: { latex: string; isInline?: boolean }) {
+ return isInline ? : ;
+}
+
+export default KatexMath;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/MenuItem.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/MenuItem.tsx
index 854f89f4ae..e674681b9f 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/MenuItem.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/MenuItem.tsx
@@ -49,7 +49,11 @@ const MenuItem = forwardRef(function (
}}
>
{icon}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/TextLeaf.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/TextLeaf.tsx
index d06a87e083..526452dcd4 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/TextLeaf.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/TextLeaf.tsx
@@ -4,6 +4,9 @@ import { useCallback, useRef } from 'react';
import TextLink from '../TextLink';
import { converToIndexLength } from '$app/utils/document/slate_editor';
import LinkHighLight from '$app/components/document/_shared/TextLink/LinkHighLight';
+import TemporaryInput from '$app/components/document/_shared/TemporaryInput';
+import InlineContainer from '$app/components/document/_shared/InlineBlock/InlineContainer';
+import { TemporaryType } from '$app/interfaces/document';
interface Attributes {
bold?: boolean;
@@ -16,6 +19,8 @@ interface Attributes {
prism_token?: string;
link_selection_lighted?: boolean;
link_placeholder?: string;
+ temporary?: boolean;
+ formula?: string;
}
interface TextLeafProps extends RenderLeafProps {
leaf: BaseText & Attributes;
@@ -27,6 +32,9 @@ const TextLeaf = (props: TextLeafProps) => {
const { attributes, children, leaf, isCodeBlock, editor } = props;
const ref = useRef(null);
+ const customAttributes = {
+ ...attributes,
+ };
let newChildren = children;
if (leaf.code) {
@@ -51,6 +59,7 @@ const TextLeaf = (props: TextLeafProps) => {
anchor: { path, offset: 0 },
focus: { path, offset: leaf.text.length },
});
+
return selection;
},
[editor, leaf]
@@ -64,6 +73,26 @@ const TextLeaf = (props: TextLeafProps) => {
);
}
+ if (leaf.formula) {
+ const { isLast, text, parent } = children.props;
+ const temporaryType = TemporaryType.Equation;
+ const data = { latex: leaf.formula };
+
+ newChildren = (
+
+ {newChildren}
+
+ );
+ }
+
const className = [
isCodeBlock && 'token',
leaf.prism_token && leaf.prism_token,
@@ -83,8 +112,13 @@ const TextLeaf = (props: TextLeafProps) => {
);
}
+
+ if (leaf.temporary) {
+ newChildren = {newChildren};
+ }
+
return (
-
+
{newChildren}
);
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/markdown.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/markdown.ts
new file mode 100644
index 0000000000..e0d92d3a96
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/markdown.ts
@@ -0,0 +1,156 @@
+import { TextAction } from '$app/interfaces/document';
+import { Keyboard } from '$app/constants/document/keyboard';
+import { ReactEditor } from 'slate-react';
+import { Editor, Range } from 'slate';
+import { converToSlatePoint } from '$app/utils/document/slate_editor';
+import { EQUATION_PLACEHOLDER } from '$app/constants/document/name';
+
+const bold = {
+ type: TextAction.Bold,
+ /**
+ * ** or __
+ */
+ markdownRegexp: /(\*\*|__)([^\s](?:[^\s]*?[^\s])?)(\*\*|__)$/,
+};
+const italic = {
+ type: TextAction.Italic,
+ /**
+ * * or _
+ */
+ markdownRegexp: /(\*|_)([^\s](?:[^\s]*?[^\s])?)(\*|_)$/,
+};
+const strikethrough = {
+ type: TextAction.Strikethrough,
+
+ /**
+ * ~~
+ */
+ markdownRegexp: /(~~)([^\s](?:[^\s]*?[^\s])?)(~~)$/,
+};
+const inlineCode = {
+ type: TextAction.Code,
+ /**
+ * `
+ */
+ markdownRegexp: /(`)([^\s](?:[^\s]*?[^\s])?)(`)$/,
+};
+const inlineEquation = {
+ type: TextAction.Equation,
+ /**
+ * $
+ */
+ markdownRegexp: /(\$)([^\s](?:[^\s]*?[^\s])?)(\$)$/,
+};
+const config: Record<
+ string,
+ {
+ type: TextAction;
+ getValue?: (matchStr: string) => string | boolean;
+ markdownRegexp: RegExp;
+ }[]
+> = {
+ [Keyboard.keys.ASTERISK]: [bold, italic],
+ [Keyboard.keys.UNDER_SCORE]: [bold, italic],
+ [Keyboard.keys.TILDE]: [strikethrough],
+ [Keyboard.keys.BACK_QUOTE]: [inlineCode],
+ [Keyboard.keys.DOLLAR]: [inlineEquation],
+};
+
+export const withMarkdown = (editor: ReactEditor) => {
+ const { insertText } = editor;
+
+ editor.insertText = (text) => {
+ const { selection } = editor;
+ const char = text.charAt(text.length - 1);
+ const matchFormatTypes = config[char];
+
+ if (matchFormatTypes && matchFormatTypes.length > 0 && selection && Range.isCollapsed(selection)) {
+ const { anchor } = selection;
+ const start = Editor.start(editor, []);
+ const range = { anchor, focus: start };
+ const textString = Editor.string(editor, range) + text;
+ const prevChar = textString.charAt(textString.length - 2);
+
+ // If the previous character is a space, we don't want to trigger the markdown
+ if (prevChar === ' ') {
+ return insertText(text);
+ }
+
+ for (const formatType of matchFormatTypes) {
+ const match = textString.match(formatType.markdownRegexp);
+
+ if (match) {
+ const pluralStart = match[0].substring(0, 2) === char.padStart(2, char);
+ const pluralEnd = prevChar === char;
+
+ if (pluralStart && !pluralEnd) {
+ break;
+ }
+
+ const matchIndex = match.index || 0;
+
+ if (formatType.type === TextAction.Equation) {
+ formatEquation(editor, matchIndex, match[2]);
+ return;
+ }
+
+ // format already applied
+ editor.select({
+ anchor,
+ focus: converToSlatePoint(editor, matchIndex),
+ });
+ if (isMarkAction(editor, formatType.type)) {
+ editor.select(anchor);
+ break;
+ }
+
+ Editor.addMark(editor, formatType.type, true);
+
+ // delete extra characters
+ editor.select(converToSlatePoint(editor, matchIndex));
+ editor.delete({
+ distance: pluralStart ? 2 : 1,
+ });
+
+ editor.select(converToSlatePoint(editor, matchIndex + match[2].length));
+ if (pluralStart) {
+ editor.delete({
+ distance: 1,
+ });
+ }
+
+ return;
+ }
+ }
+ }
+
+ insertText(text);
+ };
+
+ return editor;
+};
+
+function isMarkAction(editor: Editor, format: string) {
+ const marks = Editor.marks(editor) as Record | null;
+
+ return marks ? !!marks[format] : false;
+}
+
+function formatEquation(editor: Editor, index: number, latex: string) {
+ editor.select(converToSlatePoint(editor, index));
+ editor.delete({
+ distance: latex.length + 1,
+ });
+
+ editor.insertNode(
+ {
+ text: EQUATION_PLACEHOLDER,
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ formula: latex,
+ },
+ {
+ select: true,
+ }
+ );
+}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/useEditor.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/useEditor.ts
index 061154fad8..fbb77beb60 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/useEditor.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/useEditor.ts
@@ -15,6 +15,8 @@ import Delta from 'quill-delta';
import isHotkey from 'is-hotkey';
import { useSlateYjs } from '$app/components/document/_shared/SlateEditor/useSlateYjs';
+const AFTER_RENDER_DELAY = 100;
+
export function useEditor({
onChange,
onSelectionChange,
@@ -24,6 +26,7 @@ export function useEditor({
onKeyDown,
isCodeBlock,
linkDecorateSelection,
+ temporarySelection,
}: EditorProps) {
const { editor } = useSlateYjs({ delta });
const ref = useRef(null);
@@ -31,6 +34,7 @@ export function useEditor({
const onSelectionChangeHandler = useCallback(
(slateSelection: Selection) => {
const rangeStatic = converToIndexLength(editor, slateSelection);
+
onSelectionChange?.(rangeStatic, null);
},
[editor, onSelectionChange]
@@ -39,6 +43,7 @@ export function useEditor({
const onChangeHandler = useCallback(
(slateValue: Descendant[]) => {
const oldContents = delta || new Delta();
+
onChange?.(convertToDelta(slateValue), oldContents);
onSelectionChangeHandler(editor.selection);
},
@@ -67,8 +72,10 @@ export function useEditor({
) => {
if (!selection) return null;
const range = convertToSlateSelection(selection.index, selection.length, editor.children) as BaseRange;
+
if (range && !Range.isCollapsed(range)) {
const intersection = Range.intersection(range, Editor.range(editor, path));
+
if (intersection) {
return {
...intersection,
@@ -76,6 +83,7 @@ export function useEditor({
};
}
}
+
return null;
},
[editor]
@@ -93,11 +101,14 @@ export function useEditor({
link_selection_lighted: true,
link_placeholder: linkDecorateSelection?.placeholder,
}),
+ getDecorateRange(path, temporarySelection, {
+ temporary: true,
+ }),
].filter((range) => range !== null) as Range[];
return ranges;
},
- [decorateSelection, linkDecorateSelection, getDecorateRange]
+ [temporarySelection, decorateSelection, linkDecorateSelection, getDecorateRange]
);
const onKeyDownRewrite = useCallback(
@@ -107,6 +118,7 @@ export function useEditor({
event.preventDefault();
editor.insertText('\n');
};
+
// There is different behavior for code block and normal text
// In code block, we press enter to insert a new line
// In normal text, we press shift + enter to insert a new line
@@ -115,11 +127,13 @@ export function useEditor({
insertBreak();
return;
}
+
if (isHotkey(Keyboard.keys.TAB, event)) {
event.preventDefault();
indent(editor, 2);
return;
}
+
if (isHotkey(Keyboard.keys.SHIFT_TAB, event)) {
event.preventDefault();
outdent(editor, 2);
@@ -141,13 +155,16 @@ export function useEditor({
useEffect(() => {
if (!ref.current) return;
+
const isFocused = ReactEditor.isFocused(editor);
+
if (!selection) {
isFocused && editor.deselect();
return;
}
const slateSelection = convertToSlateSelection(selection.index, selection.length, editor.children);
+
if (!slateSelection) return;
if (isFocused && JSON.stringify(slateSelection) === JSON.stringify(editor.selection)) return;
@@ -156,15 +173,16 @@ export function useEditor({
// because the slate must be focused before change selection,
// but then it will trigger selection change, and the selection is not what we want
const isSuccess = focusNodeByIndex(ref.current, selection.index, selection.length);
+
if (!isSuccess) {
Transforms.select(editor, slateSelection);
} else {
// Fix: the slate is possible to lose focus in next tick after focusNodeByIndex
- requestAnimationFrame(() => {
+ setTimeout(() => {
if (window.getSelection()?.type === 'None' && !editor.selection) {
Transforms.select(editor, slateSelection);
}
- });
+ }, AFTER_RENDER_DELAY);
}
}, [editor, selection]);
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/useSlateYjs.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/useSlateYjs.ts
index 68d06db45c..50473c59b2 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/useSlateYjs.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/useSlateYjs.ts
@@ -5,6 +5,7 @@ import { convertToSlateValue } from '$app/utils/document/slate_editor';
import { slateNodesToInsertDelta, withYjs, YjsEditor } from '@slate-yjs/core';
import { withReact } from 'slate-react';
import { createEditor } from 'slate';
+import { withMarkdown } from '$app/components/document/_shared/SlateEditor/markdown';
export function useSlateYjs({ delta }: { delta?: Delta }) {
const [yText, setYText] = useState(undefined);
@@ -13,13 +14,14 @@ export function useSlateYjs({ delta }: { delta?: Delta }) {
const sharedType = yDoc.get('content', Y.XmlText) as Y.XmlText;
const value = convertToSlateValue(delta || new Delta());
const insertDelta = slateNodesToInsertDelta(value);
+
sharedType.applyDelta(insertDelta);
setYText(insertDelta[0].insert as Y.Text);
return sharedType;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
- const editor = useMemo(() => withReact(withYjs(createEditor(), sharedType)), []);
+ const editor = useMemo(() => withYjs(withMarkdown(withReact(createEditor())), sharedType), []);
// Connect editor in useEffect to comply with concurrent mode requirements.
useEffect(() => {
@@ -33,6 +35,7 @@ export function useSlateYjs({ delta }: { delta?: Delta }) {
if (!yText) return;
const oldContents = new Delta(yText.toDelta());
const diffDelta = oldContents.diff(delta || new Delta());
+
if (diffDelta.ops.length === 0) return;
yText.applyDelta(diffDelta.ops);
}, [delta, editor, yText]);
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeDoc.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeDoc.hooks.ts
index f06bd6ca43..11eceaaeca 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeDoc.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeDoc.hooks.ts
@@ -1,10 +1,12 @@
import { DocumentControllerContext } from '$app/stores/effects/document/document_controller';
import { useContext } from 'react';
import { useAppSelector } from '$app/stores/store';
+import { DOCUMENT_NAME } from '$app/constants/document/name';
export function useSubscribeDocument() {
const controller = useContext(DocumentControllerContext);
const docId = controller.documentId;
+
return {
docId,
controller,
@@ -14,7 +16,8 @@ export function useSubscribeDocument() {
export function useSubscribeDocumentData() {
const { docId } = useSubscribeDocument();
const data = useAppSelector((state) => {
- return state.document[docId];
+ return state[DOCUMENT_NAME][docId];
});
+
return data;
}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeLinkPopover.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeLinkPopover.hooks.ts
index 9333fad48f..210b8daaf1 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeLinkPopover.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeLinkPopover.hooks.ts
@@ -1,11 +1,12 @@
import { useAppSelector } from '$app/stores/store';
import { useSubscribeDocument } from '$app/components/document/_shared/SubscribeDoc.hooks';
+import { TEXT_LINK_NAME } from '$app/constants/document/name';
export function useSubscribeLinkPopover() {
const { docId } = useSubscribeDocument();
const linkPopover = useAppSelector((state) => {
- return state.documentLinkPopover[docId];
+ return state[TEXT_LINK_NAME][docId];
});
return linkPopover;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeNode.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeNode.hooks.ts
index 702c45c421..909c76c0eb 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeNode.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeNode.hooks.ts
@@ -2,6 +2,7 @@ import { store, useAppSelector } from '@/appflowy_app/stores/store';
import { createContext, useMemo } from 'react';
import { Node } from '$app/interfaces/document';
import { useSubscribeDocument } from '$app/components/document/_shared/SubscribeDoc.hooks';
+import { DOCUMENT_NAME, RECT_RANGE_NAME } from '$app/constants/document/name';
/**
* Subscribe node information
@@ -11,20 +12,23 @@ export function useSubscribeNode(id: string) {
const { docId } = useSubscribeDocument();
const node = useAppSelector((state) => {
- const documentState = state.document[docId];
+ const documentState = state[DOCUMENT_NAME][docId];
+
return documentState?.nodes[id];
});
const childIds = useAppSelector((state) => {
- const documentState = state.document[docId];
+ const documentState = state[DOCUMENT_NAME][docId];
+
if (!documentState) return;
const childrenId = documentState.nodes[id]?.children;
+
if (!childrenId) return;
return documentState.children[childrenId];
});
const isSelected = useAppSelector((state) => {
- return state.documentRectSelection[docId]?.selection.includes(id) || false;
+ return state[RECT_RANGE_NAME][docId]?.selection.includes(id) || false;
});
// Memoize the node and its children
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeRectRange.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeRectRange.hooks.ts
index 50ce6ad061..c5394878c5 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeRectRange.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeRectRange.hooks.ts
@@ -1,10 +1,12 @@
import { useSubscribeDocument } from '$app/components/document/_shared/SubscribeDoc.hooks';
import { useAppSelector } from '$app/stores/store';
+import { RECT_RANGE_NAME } from '$app/constants/document/name';
export function useSubscribeRectRange() {
const { docId } = useSubscribeDocument();
const rectRange = useAppSelector((state) => {
- return state.documentRectSelection[docId];
+ return state[RECT_RANGE_NAME][docId];
});
+
return rectRange;
}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeSelection.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeSelection.hooks.ts
index 649824d3b5..299ef1bfa2 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeSelection.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeSelection.hooks.ts
@@ -2,16 +2,25 @@ import { useAppSelector } from '$app/stores/store';
import { RangeState, RangeStatic } from '$app/interfaces/document';
import { useMemo, useRef } from 'react';
import { useSubscribeDocument } from '$app/components/document/_shared/SubscribeDoc.hooks';
+import { RANGE_NAME, TEMPORARY_NAME, TEXT_LINK_NAME } from '$app/constants/document/name';
export function useSubscribeDecorate(id: string) {
const { docId } = useSubscribeDocument();
const decorateSelection = useAppSelector((state) => {
- return state.documentRange[docId]?.ranges[id];
+ return state[RANGE_NAME][docId]?.ranges[id];
+ });
+
+ const temporarySelection = useAppSelector((state) => {
+ const temporary = state[TEMPORARY_NAME][docId];
+
+ if (!temporary || temporary.id !== id) return;
+ return temporary.selection;
});
const linkDecorateSelection = useAppSelector((state) => {
- const linkPopoverState = state.documentLinkPopover[docId];
+ const linkPopoverState = state[TEXT_LINK_NAME][docId];
+
if (!linkPopoverState?.open || linkPopoverState?.id !== id) return;
return {
selection: linkPopoverState.selection,
@@ -22,18 +31,22 @@ export function useSubscribeDecorate(id: string) {
return {
decorateSelection,
linkDecorateSelection,
+ temporarySelection,
};
}
+
export function useFocused(id: string) {
const { docId } = useSubscribeDocument();
const caretRef = useRef();
const focusCaret = useAppSelector((state) => {
- const currentCaret = state.documentRange[docId]?.caret;
+ const currentCaret = state[RANGE_NAME][docId]?.caret;
+
caretRef.current = currentCaret;
if (currentCaret?.id === id) {
return currentCaret;
}
+
return null;
});
@@ -52,8 +65,10 @@ export function useRangeRef() {
const { docId, controller } = useSubscribeDocument();
const rangeRef = useRef();
+
useAppSelector((state) => {
- const currentRange = state.documentRange[docId];
+ const currentRange = state[RANGE_NAME][docId];
+
rangeRef.current = currentRange;
});
return rangeRef;
@@ -63,7 +78,7 @@ export function useSubscribeRanges() {
const { docId } = useSubscribeDocument();
const rangeState = useAppSelector((state) => {
- return state.documentRange[docId];
+ return state[RANGE_NAME][docId];
});
return rangeState;
@@ -73,7 +88,7 @@ export function useSubscribeCaret() {
const { docId } = useSubscribeDocument();
const caret = useAppSelector((state) => {
- return state.documentRange[docId]?.caret;
+ return state[RANGE_NAME][docId]?.caret;
});
return caret;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeSlash.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeSlash.hooks.ts
index 2fe1216096..94fca0f2f1 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeSlash.hooks.ts
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeSlash.hooks.ts
@@ -1,11 +1,12 @@
import { useSubscribeDocument } from '$app/components/document/_shared/SubscribeDoc.hooks';
import { useAppSelector } from '$app/stores/store';
+import { SLASH_COMMAND_NAME } from '$app/constants/document/name';
export function useSubscribeSlashState() {
const { docId } = useSubscribeDocument();
const slashCommandState = useAppSelector((state) => {
- return state.documentSlashCommand[docId];
+ return state[SLASH_COMMAND_NAME][docId];
});
return slashCommandState;
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeTemporary.hooks.ts b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeTemporary.hooks.ts
new file mode 100644
index 0000000000..1b3d0f69a8
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SubscribeTemporary.hooks.ts
@@ -0,0 +1,11 @@
+import { useSubscribeDocument } from '$app/components/document/_shared/SubscribeDoc.hooks';
+import { useAppSelector } from '$app/stores/store';
+import { TemporaryState } from '$app/interfaces/document';
+import { TEMPORARY_NAME } from '$app/constants/document/name';
+
+export function useSubscribeTemporary(): TemporaryState {
+ const { docId } = useSubscribeDocument();
+ const temporaryState = useAppSelector((state) => state[TEMPORARY_NAME][docId]);
+
+ return temporaryState;
+}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/TemporaryInput/EquationEditContent.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/TemporaryInput/EquationEditContent.tsx
new file mode 100644
index 0000000000..ce5eee7143
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/TemporaryInput/EquationEditContent.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import TextField from '@mui/material/TextField';
+import { CheckOutlined, FunctionsOutlined } from '@mui/icons-material';
+import { Divider, IconButton, InputAdornment } from '@mui/material';
+
+function EquationEditContent({
+ value,
+ onChange,
+ onConfirm,
+}: {
+ value: string;
+ onChange: (newVal: string) => void;
+ onConfirm: () => void;
+}) {
+ return (
+
+
{
+ if (e.key === 'Enter') {
+ onConfirm();
+ }
+ }}
+ InputProps={{
+ startAdornment: (
+
+
+
+ ),
+ }}
+ variant='standard'
+ value={value}
+ onChange={(e) => {
+ const newVal = e.target.value;
+
+ if (newVal === value) return;
+ onChange(newVal);
+ }}
+ />
+
+
+
+
+