diff --git a/package.json b/package.json index b0e5704..fa2b717 100644 --- a/package.json +++ b/package.json @@ -58,9 +58,7 @@ "electron-store": "^8.1.0", "md5": "^2.3.0", "mousetrap": "^1.6.5", - "node-sass": "^7.0.3", - "redux-persist": "^6.0.0", - "redux-persist-electron-storage": "^2.1.0" + "redux-persist": "^6.0.0" }, "browser": { "fs": false diff --git a/src/pages/Note/Hlexical/context/shared/useLayoutEffect.jsx b/src/pages/Note/Hlexical/context/shared/useLayoutEffect.jsx index a435b41..7dfad92 100644 --- a/src/pages/Note/Hlexical/context/shared/useLayoutEffect.jsx +++ b/src/pages/Note/Hlexical/context/shared/useLayoutEffect.jsx @@ -1,5 +1,5 @@ import {useEffect, useLayoutEffect} from 'react'; -import {CAN_USE_DOM} from './canUseDOM'; +import {CAN_USE_DOM} from '@/pages/Note/Hlexical/context/shared/canUseDOM'; const useLayoutEffectImpl = CAN_USE_DOM ? useLayoutEffect diff --git a/src/pages/Note/Hlexical/hook/userModal.jsx b/src/pages/Note/Hlexical/hook/userModal.jsx index 018abd9..cc16927 100644 --- a/src/pages/Note/Hlexical/hook/userModal.jsx +++ b/src/pages/Note/Hlexical/hook/userModal.jsx @@ -1,7 +1,7 @@ import {useCallback, useMemo, useState} from 'react'; import * as React from 'react'; -import Modal from '../plugins/Input/Modal'; +import Modal from '@/pages/Note/Hlexical/plugins/Input/Modal'; export default function useModal(){ const [modalContent, setModalContent] = useState(null); diff --git a/src/pages/Note/Hlexical/index.jsx b/src/pages/Note/Hlexical/index.jsx index 9f76d8d..9a1b177 100644 --- a/src/pages/Note/Hlexical/index.jsx +++ b/src/pages/Note/Hlexical/index.jsx @@ -34,6 +34,7 @@ import ContextMenuPlugin from "@/pages/Note/Hlexical/plugins/ContextMenuPlugin" import {Spin} from "antd"; import {useState} from "react"; import DragDropPaste from "@/pages/Note/Hlexical/plugins/DragDropPastePlugin"; +import TreeViewPlugin from "@/pages/Note/Hlexical/plugins/TreeViewPlugin"; function Placeholder() { return
记录一些灵感吧
; } @@ -94,7 +95,7 @@ export default function Hlexical(props) { {/*markdown 快捷键*/} {/*图片加载*/} - + {/*分割线 */} diff --git a/src/pages/Note/Hlexical/index.less b/src/pages/Note/Hlexical/index.less index 93287b4..1a4ceb9 100644 --- a/src/pages/Note/Hlexical/index.less +++ b/src/pages/Note/Hlexical/index.less @@ -225,22 +225,60 @@ h1 { } .editor-heading-h1 { - font-size: 24px; + font-size: 50px; color: rgb(5, 5, 5); font-weight: 400; margin: 0; - margin-bottom: 12px; + margin-bottom: 25px; padding: 0; } .editor-heading-h2 { - font-size: 15px; - color: rgb(101, 103, 107); - font-weight: 700; + font-size: 45px; + //color: rgb(101, 103, 107); + //font-weight: 400; + color: rgb(5, 5, 5); + font-weight: 400; margin: 0; - margin-top: 10px; + margin-top: 25px; padding: 0; - text-transform: uppercase; + //text-transform: uppercase; +} +.editor-heading-h3 { + font-size: 40px; + color: rgb(5, 5, 5); + font-weight: 400; + margin: 0; + margin-top: 20px; + padding: 0; + //text-transform: uppercase; +} +.editor-heading-h4 { + font-size: 35px; + color: rgb(5, 5, 5); + font-weight: 400; + margin: 0; + margin-top: 20px; + padding: 0; + //text-transform: uppercase; +} +.editor-heading-h5 { + font-size: 30px; + color: rgb(5, 5, 5); + font-weight: 400; + margin: 0; + margin-top: 15px; + padding: 0; + //text-transform: uppercase; +} +.editor-heading-h6 { + font-size: 25px; + color: rgb(5, 5, 5); + font-weight: 400; + margin: 0; + margin-top: 15px; + padding: 0; + //text-transform: uppercase; } .editor-quote { diff --git a/src/pages/Note/Hlexical/nodes/ImageNode/ImageComponent/index.jsx b/src/pages/Note/Hlexical/nodes/ImageNode/ImageComponent/index.jsx index a15337f..f5c314e 100644 --- a/src/pages/Note/Hlexical/nodes/ImageNode/ImageComponent/index.jsx +++ b/src/pages/Note/Hlexical/nodes/ImageNode/ImageComponent/index.jsx @@ -1,4 +1,4 @@ -import '../index.less'; +import '@/pages/Note/Hlexical/nodes/ImageNode/index.less'; import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin'; import {useCollaborationContext} from '@lexical/react/LexicalCollaborationContext'; import {CollaborationPlugin} from '@lexical/react/LexicalCollaborationPlugin'; @@ -30,20 +30,25 @@ import {Suspense, useCallback, useEffect, useRef, useState} from 'react'; // import {createWebsocketProvider} from '../../../createWebsocketProvider'; import {useSharedHistoryContext} from '../../../context/SharedHistoryContext'; -import EmojisPlugin from '../../../plugins/EmojisPlugin'; -import KeywordsPlugin from '../../../plugins/KeywordsPlugin'; -import LinkPlugin from '../../../plugins/LinkPlugin'; +import EmojisPlugin from '@/pages/Note/Hlexical/plugins/EmojisPlugin'; +import KeywordsPlugin from '@/pages/Note/Hlexical/plugins/KeywordsPlugin'; +import LinkPlugin from '@/pages/Note/Hlexical/plugins/LinkPlugin'; // import MentionsPlugin from '../../../plugins/MentionsPlugin'; -import TreeViewPlugin from '../../../plugins/TreeViewPlugin'; -import ContentEditable from '../../../plugins/Input/ContentEditable'; -import ImageResizer from '../../../plugins/Input/ImageResizer'; -import Placeholder from '../../../plugins/Input/Placeholder'; - -import {$isImageNode} from '../index'; +import TreeViewPlugin from '@/pages/Note/Hlexical/plugins/TreeViewPlugin'; +import ContentEditable from '@/pages/Note/Hlexical/plugins/Input/ContentEditable'; +import ImageResizer from '@/pages/Note/Hlexical/plugins/Input/ImageResizer'; +import Placeholder from '@/pages/Note/Hlexical/plugins/Input/Placeholder'; +import {$isImageNode} from '@/pages/Note/Hlexical/nodes/ImageNode'; +import {Image as AntImage} from "antd"; +/* + * 缓存图片，后期使用预览所有图片。 + */ const imageCache = new Set(); - +/* + * 添加图片到缓存列表 + */ function useSuspenseImage(src) { if (!imageCache.has(src)) { throw new Promise((resolve) => { @@ -59,16 +64,23 @@ function useSuspenseImage(src) { function LazyImage({altText, className, imageRef, src, width, height, maxWidth,}) { useSuspenseImage(src); - return ({altText}):(); + />) } export default function ImageComponent({ @@ -87,6 +99,7 @@ export default function ImageComponent({ const buttonRef = useRef(null); const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey); const [isResizing, setIsResizing] = useState(false); + // 协作 const {isCollabActive} = useCollaborationContext(); const [editor] = useLexicalComposerContext(); const [selection, setSelection] = useState(null); @@ -139,6 +152,7 @@ export default function ImageComponent({ }, [caption, editor, setSelected],); useEffect(() => { + // 增强 let isMounted = true; const unregister = mergeRegister( editor.registerUpdateListener(({editorState}) => { @@ -152,12 +166,15 @@ export default function ImageComponent({ }, COMMAND_PRIORITY_LOW,), editor.registerCommand(CLICK_COMMAND, (payload) => { const event = payload; - + console.log("点击图片：",event,isResizing) if (isResizing) { return true; } if (event.target === imageRef.current) { - if (event.shiftKey) { + if (event.ctrlKey){ + // ctrl 预览图片 + }else if (event.shiftKey) { + // shift反选 setSelected(!isSelected); } else { clearSelection(); @@ -168,6 +185,7 @@ export default function ImageComponent({ return false; }, COMMAND_PRIORITY_LOW,), + // 拖拽 editor.registerCommand(DRAGSTART_COMMAND, (event) => { if (event.target === imageRef.current) { // TODO This is just a temporary workaround for FF to behave like other browsers. @@ -191,6 +209,7 @@ export default function ImageComponent({ editor.update(() => { const node = $getNodeByKey(nodeKey); if ($isImageNode(node)) { + // 展示说明文字 node.setShowCaption(true); } }); diff --git a/src/pages/Note/Hlexical/nodes/ImageNode/index.jsx b/src/pages/Note/Hlexical/nodes/ImageNode/index.jsx index 73b9fa6..2cae8ed 100644 --- a/src/pages/Note/Hlexical/nodes/ImageNode/index.jsx +++ b/src/pages/Note/Hlexical/nodes/ImageNode/index.jsx @@ -3,7 +3,7 @@ import * as React from 'react'; import {Suspense} from 'react'; const ImageComponent = React.lazy( - () => import('./ImageComponent'), + () => import('@/pages/Note/Hlexical/nodes/ImageNode/ImageComponent'), ); function convertImageElement(domNode) { @@ -15,17 +15,18 @@ function convertImageElement(domNode) { return null; } - export class ImageNode extends DecoratorNode { + // 路径 __src; __altText; + // 大小 __width; __height; __maxWidth; + // 图片文字说明 __showCaption; __caption; __captionsEnabled; - static getType() { return 'image'; } @@ -154,6 +155,7 @@ export class ImageNode extends DecoratorNode { } decorate() { + console.log('ImageNode.decorate()') return ( onClick({altText, src})}> + onClick={() => onClick({altText, src,resizable})}> 确认 @@ -73,14 +74,18 @@ export function InsertImageUriDialogBody({ ); } +/** + * 插入上传文件对话框 + * @param onClick + * @returns {Element} + * @constructor + */ export function InsertImageUploadedDialogBody({ onClick, }) { const [src, setSrc] = useState(''); const [altText, setAltText] = useState(''); - const isDisabled = src === ''; - const loadImage = (files) => { const reader = new FileReader(); reader.onload = function () { @@ -121,6 +126,13 @@ export function InsertImageUploadedDialogBody({ ); } +/** + * 插入文件对话框 + * @param activeEditor + * @param onClose + * @returns {Element} + * @constructor + */ export function InsertImageDialog({ activeEditor, onClose, @@ -166,6 +178,12 @@ export function InsertImageDialog({ ); } +/** + * 图片插件 + * @param captionsEnabled + * @returns {null} + * @constructor + */ export default function ImagesPlugin({captionsEnabled,}){ const [editor] = useLexicalComposerContext(); @@ -214,7 +232,10 @@ export default function ImagesPlugin({captionsEnabled,}){ return null; } - +/** + * 拖拽图标 + * @type {string} + */ const TRANSPARENT_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; const img = document.createElement('img'); diff --git a/src/pages/Note/Hlexical/plugins/ToolbarPlugin.js b/src/pages/Note/Hlexical/plugins/ToolbarPlugin.js index 1ce529f..07dcb17 100644 --- a/src/pages/Note/Hlexical/plugins/ToolbarPlugin.js +++ b/src/pages/Note/Hlexical/plugins/ToolbarPlugin.js @@ -39,49 +39,41 @@ import { getDefaultCodeLanguage, getCodeLanguages } from "@lexical/code"; -import DropDown, {DropDownItem} from "./Input/DropDown"; +import DropDown, {DropDownItem} from "@/pages/Note/Hlexical/plugins/Input/DropDown"; -import {InsertImageDialog} from "./ImagesPlugin"; -import useModal from "../hook/userModal"; -import {InsertTableDialog} from "./TablePlugin"; +import {InsertImageDialog} from "@/pages/Note/Hlexical/plugins/ImagesPlugin"; +import useModal from "@/pages/Note/Hlexical/hook/userModal"; +import {InsertTableDialog} from "@/pages/Note/Hlexical/plugins/TablePlugin"; import {INSERT_HORIZONTAL_RULE_COMMAND} from "@lexical/react/LexicalHorizontalRuleNode"; -import {InsertInlineImageDialog} from "./InlineImagePlugin"; -import {INSERT_EXCALIDRAW_COMMAND} from "./ExcalidrawPlugin"; +import {InsertInlineImageDialog} from "@/pages/Note/Hlexical/plugins/InlineImagePlugin"; +import {INSERT_EXCALIDRAW_COMMAND} from "@/pages/Note/Hlexical/plugins/ExcalidrawPlugin"; const LowPriority = 1; - -const supportedBlockTypes = new Set([ - "paragraph", - "quote", - "code", - "h1", - "h2", - "h3", - "h4", - "h5", - "h6", - "ul", - "ol" +// 支持的块类型 +const supportedBlockTypes = new Set(["paragraph", "quote", "code", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol" ]); - -const blockTypeToBlockName = { - code: "代码块", - h1: "一级标题", - h2: "二级标题", - h3: "三级标题", - h4: "四级标题", - h5: "五级标题", - h6: "六级标题", - ol: "有序序列", +// 块类型对应的名称 +const blockTypeToBlockName = {code: "代码块", + h1: "一级标题", h2: "二级标题", h3: "三级标题", h4: "四级标题", h5: "五级标题", h6: "六级标题", + ol: "有序序列", ul: "无序序列", paragraph: "普通文本", quote: "引用", - ul: "无序序列" }; +/** + * 工具栏分割符 + * @returns {JSX.Element} + * @constructor + */ function Divider() { return
; } +/** + * 位置计算 + * @param editor + * @param rect + */ function positionEditorElement(editor, rect) { if (rect === null) { editor.style.opacity = "0"; @@ -96,6 +88,12 @@ function positionEditorElement(editor, rect) { } } +/** + * 浮动连接设置 + * @param editor + * @returns {JSX.Element} + * @constructor + */ function FloatingLinkEditor({editor}) { const editorRef = useRef(null); const inputRef = useRef(null); @@ -236,6 +234,15 @@ function FloatingLinkEditor({editor}) { ); } +/** + * 下拉选择 + * @param onChange + * @param className + * @param options + * @param value + * @returns {JSX.Element} + * @constructor + */ function Select({onChange, className, options, value}) { return (