mirror of
https://github.com/linsa-io/linsa.git
synced 2026-01-12 12:20:23 +01:00
fix: Link, Pages, Topic, Hook and Others (#178)
* chore: remove useKeyDownListener * chore: remove react-use, update jazz version and add query string * chore: update jazz version * chore: use simple mac or win utils code * feat(util): add isTextInput * feat(hooks): all needed hooks * fix: link bunch stuff * fix: page bunch stuff * chore: bunch update for custom component * chore: use throttle from internal hook * chore: topic bunch stuff * chore: update layout * fix: truncate content header of topic detail
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
import * as React from "react"
|
||||
import { EditorContent, useEditor } from "@tiptap/react"
|
||||
import { Editor, Content } from "@tiptap/core"
|
||||
import { useThrottleFn } from "react-use"
|
||||
import { BubbleMenu } from "./components/bubble-menu"
|
||||
import { createExtensions } from "./extensions"
|
||||
import "./styles/index.css"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { getOutput } from "./lib/utils"
|
||||
import { EditorView } from "@tiptap/pm/view"
|
||||
import type { EditorView } from "@tiptap/pm/view"
|
||||
import { useThrottle } from "@/hooks/use-throttle"
|
||||
|
||||
export interface LAEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, "value"> {
|
||||
output?: "html" | "json" | "text"
|
||||
@@ -25,10 +25,6 @@ export interface LAEditorRef {
|
||||
editor: Editor | null
|
||||
}
|
||||
|
||||
interface CustomEditor extends Editor {
|
||||
previousBlockCount?: number
|
||||
}
|
||||
|
||||
export const LAEditor = React.forwardRef<LAEditorRef, LAEditorProps>(
|
||||
(
|
||||
{
|
||||
@@ -46,32 +42,13 @@ export const LAEditor = React.forwardRef<LAEditorRef, LAEditorProps>(
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [content, setContent] = React.useState<Content | undefined>(value)
|
||||
const throttledContent = useThrottleFn(defaultContent => defaultContent, throttleDelay, [content])
|
||||
const [lastThrottledContent, setLastThrottledContent] = React.useState(throttledContent)
|
||||
const throttledSetValue = useThrottle((value: Content) => onUpdate?.(value), throttleDelay)
|
||||
|
||||
const handleUpdate = React.useCallback(
|
||||
(editor: Editor) => {
|
||||
const newContent = getOutput(editor, output)
|
||||
setContent(newContent)
|
||||
|
||||
const customEditor = editor as CustomEditor
|
||||
const json = customEditor.getJSON()
|
||||
|
||||
if (json.content && Array.isArray(json.content)) {
|
||||
const currentBlockCount = json.content.length
|
||||
|
||||
if (
|
||||
typeof customEditor.previousBlockCount === "number" &&
|
||||
currentBlockCount > customEditor.previousBlockCount
|
||||
) {
|
||||
onNewBlock?.(newContent)
|
||||
}
|
||||
|
||||
customEditor.previousBlockCount = currentBlockCount
|
||||
}
|
||||
throttledSetValue(getOutput(editor, output))
|
||||
},
|
||||
[output, onNewBlock]
|
||||
[output, throttledSetValue]
|
||||
)
|
||||
|
||||
const editor = useEditor({
|
||||
@@ -96,13 +73,6 @@ export const LAEditor = React.forwardRef<LAEditorRef, LAEditorProps>(
|
||||
}
|
||||
})
|
||||
|
||||
React.useEffect(() => {
|
||||
if (lastThrottledContent !== throttledContent) {
|
||||
setLastThrottledContent(throttledContent)
|
||||
onUpdate?.(throttledContent!)
|
||||
}
|
||||
}, [throttledContent, lastThrottledContent, onUpdate])
|
||||
|
||||
React.useImperativeHandle(
|
||||
ref,
|
||||
() => ({
|
||||
|
||||
Reference in New Issue
Block a user